HTML5 Effects: How to lazy load images to make pages faster

Share RGraph:   Share or Like RGraph on Facebook!

Summary
This is an example of lazy loading images using JavaScript. This can lead to faster pages and less bandwidth consumed due to there being less to download.

If your website has enough traffic that it laughs at jams in China then one thing that you may want to consider to increase the performance of the website and decrease stress on your webserver is lazy-loading images. This is a technique that, using JavaScript, only loads the images on a page (or some of them) when the user has scrolled to them or just before them (ie just before the images are about to be shown in the browser).

This can reduce the bandwidth used by your website since not everyone will scroll and thus some of the images won't be loaded. But everyone who does scroll will still see the images - they just won't be automatically downloaded when the page loads.

So how easy is this to implement? Well - it's a piece of cake. And if you didn't get that - it's really easy.

It consists of five steps and they're all shown below. There's also a demo page that has had all the fluff cut out so it's just the necessary bare bones. So not hard at all.

1. Add the HTML5 DOCTYPE

If you don't add the doctype then the whole thing won't work because the coordinates of where the current scroll-position is are not reported as required. Different DOCTYPES may work - but haven't been tested.

<!DOCTYPE html >

2. Include jQuery

First thing to do is include jQuery. It makes things such as adding events much easier. Here is a <script> tag that uses the jQuery library from the Google CDN.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

3. Add the CSS for the lazyload class

This just sets the default opacity for the images to zero so that they can then be faded in.

<style>
    .lazyload {
        opacity: 0;
    }
</style>

4. Update the image tag

Now the image tag has to be updated so that the JavaScript will pick it up when it loops through all of the images on the page. This involves changing the src attribute to be a data-src attribute and adding the class attribute that is set to lazyload. I think that you'll agree - not too tricky!

<img data-src="https://www.rgraph.net/images/open-source.png"
     class="lazyload"
     width="102"
     height="85"
     alt="Open Source logo"
    />

5. Add the JavaScript that loads the images

And here is the JavaScript that's triggered when you scroll the browser which then loads the images.
<script>
    $(document).scroll(function(e)
    {
        var winHeight = $(window).height(),
            curPos    = $(document).scrollTop(),
            $images   = $('.lazyload');

        // Loop thru all of the images that have been assigned the lazyload class
        for (var i=0; i<$images.length; ++i) {

            // Note: $img is an jQuery object
            var $img   = $images.eq(i),                
                imgPos = $img.offset().top;

            if(curPos >= (imgPos - winHeight - 50)) {

                var url = $img.attr('data-src'),
                    img = $img.get(0); // This is the DOM image object

                if (url.length) {
                    img.src = url;
                    img.setAttribute('data-src', '');
                    
                    // This is a fade-in effect.
                    var frames = 20,
                        delay  = 50; // Milliseconds

                    for (var i=0; i<frames; i++) {
                        (function (i)
                        {
                            setTimeout(function ()
                            {
                                img.style.opacity = i * (1 / frames);
                            }, delay * i)
                        })(i)
                    }
                }
            }
        }
    });
</script>

Demo page

There's a bare bones demo of this technique here.

Conclusion

It's not hard to get up and running. You would need to have a seriously busy website for it to have a significant effect on your bandwidth. Though you may have other reasons for lazy-loading images - such as big image files that you don't want slowing down the page when it loads. Having the images only load when the user scrolls to them makes complete sense in this case.