How lazy loading images using JavaScript works?

You can use justlazy, which is independent of dependencies like jQuery and very lightweight:

The only call you need is:

var placeholders = document.querySelectorAll(".load-if-visible");
for (var i = 0; i < placeholders.length; ++i) {
  Justlazy.registerLazyLoad(placeholders[i]);
}

The placeholders have to be the following structure:

<span data-src="url/to/image" data-alt="some alt text"
      data-title="some title" class="load-if-visible">
</span>

For SEO reasons you can use any other placeholder (e.g. placeholder image).

Additionally there is a guide how to use it and some general things about lazy loading of images.

And example on how to do this, easily.

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">

The "lazy.jpg" can be used on all images, which will result in really just one image is loaded (and it's a 1x1px small weight image). So, consider I'm having a list of 250 stores to visit, with a company logo for each. Could look like this:

<img src="/images/lazy.jpg" data-real-src="/images/company-1.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-2.jpg">
<img src="/images/lazy.jpg" data-real-src="/images/company-3.jpg">
...

Then comes the magic! Put this in your javascript file:

$('img[src="/images/lazy.jpg"]').each(function(index, el) {
    $(el).attr('src', $(el).data('real-src'));
});

And wacka-wacka, all the lazy.jpg images will be replaced by their "real" images. The purpose getting your html page loading faster (since those 250 companies all have the same "logo" in lazy.jpg :) ... But the JS takes care of it all after DOM finished loaded.

This is a jQuery solution of course. Can be done with pure js, as well.

Solution for 2020+:

There is a native way to lazy load images that already works in some browsers. While standardization is still underway, you can already use it today! Just add the loading attribute to your image tags and set it to "lazy":

<img
    src="picture.jpg"
    width="100"
    height="100"
    alt="descriptive text"
    loading="lazy"
>

And that's it. Compatible browsers will load that image lazily as soon as the current viewport is close enough.

Further information available here:

• Native lazy-loading for the web
• Request to be added in the HTML specification
• Current browser support

If you need a solution for older browsers, you should have a look at Lazy loading on MDN.

Here's a how-to, using plugins: http://www.webresourcesdepot.com/lazy-loading-of-images-resources-you-need/ here's the jquery plugin: http://www.appelsiini.net/projects/lazyload

basically you put a dummy image in your src attribute and add another attribute for the actual image, JS detects the scroll position of the page, and loads the image data once you get close enough to the image. it does that by replacing the src with the source of the actual image.

here's another explanation: http://engineering.slideshare.net/2011/03/faster-page-loads-with-image-lazy-loading/