CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Chris
Chris

Reputation: 77

Loading images faster on a website in java script

I am trying to import photos from a local file on my computer to my HTML file. I have managed to do this but I need to speed up the time it takes to load in on the page, 2.4mins. My idea was to load a smaller file size of the image, 200px by 200px and then load the full-sized image in the background. The problem that I am encountering is that I am not able to integrate my code of loading the images from a local file with the lazy loading code. can anyone help?

const $spans = $("span");
const {
  length
} = $spans;
$spans.each(function(i) {
  $(this).append("<img src='Images/With Out Logo/Insta Photo-" + (length - i) + ".JPG' />");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<span class="Images"></span>

Upvotes: 2

Views: 1871

Answers (2)

heartunicyclist
heartunicyclist

Reputation: 323

I'd look into using intersection observerAPI for lazy loading images, there's an excellent Google Developer Guide on this whole subject.

A basic example of this is:

Alter your <img> tags to add:

  • data-src
  • data-srcset

These point to the image to load once the element is being looked at in the "viewport".

Example:

<img class="lazy" src="placeholder.jpg" data-src="lazy-img-1x.jpg" data-srcset="lazy-img-1x.jpg 1x">

Then in a <script> tag or wherever you run your page's code just have a function that listens for the DOMContentLoaded event:

document.addEventListener("DOMContentLoaded", function() {
  var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

  if ("IntersectionObserver" in window) {
    let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
      entries.forEach(function(entry) {
        if (entry.isIntersecting) {
          let lazyImage = entry.target;
          lazyImage.src = lazyImage.dataset.src;
          lazyImage.srcset = lazyImage.dataset.srcset;
          lazyImage.classList.remove("lazy");
          lazyImageObserver.unobserve(lazyImage);
        }
      });
    });

    lazyImages.forEach(function(lazyImage) {
      lazyImageObserver.observe(lazyImage);
    });
  } else {
    // Possibly fall back to a more compatible method here
  }
});

Here's a CodePen from the guide with a better example.

Upvotes: 2

Rachel Gallen
Rachel Gallen

Reputation: 28583

Before you upload images for use on a website, you should optimize them first to prevent slow load time/your current issue.

As your images are seemingly stored in a local folder, I would suggest to first, make a back-up of the folder containing the images [to an external hard drive or another area of your hard drive].

Then, visit an image compression site (such as tinypng, - I use this but there are others, e.g CompressJpeg) Compressing images will greatly reduce the file size but the images will appear the same. You can upload multiple images at a time, and download bundles of compressed images as a zip. Ensure that when you extract the images, that they are named as you would like (and that they don't have a '1' at the end [as usually added, to indicate that the file is a copy/2nd version])

When you run your code using the smaller images, you should find that your processing time is reduced substantially.

Hope this helps

A sidenote - Both the afore-mentioned websites handle both jpgs and png formats - the website names can be misleading! :)

Upvotes: 1

Related Questions