Lazy Loading Images

by Faisal Khan Janjua

HTML

<img data-src="http://dummyimage.com/300x200/000/fff&text=1" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=2" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=3" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=4" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=5" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=6" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=7" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=8" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=9" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=10" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=11" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=12" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=13" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=14" alt="" />
<img data-src="http://dummyimage.com/300x200/000/fff&text=15" alt="" />

JavaScript

// lazy load images
$(window).on('load resize scroll', function() {
    var viewport = {
        top: $(window).scrollTop(),
        left: $(window).scrollLeft()
    };
    viewport.right = viewport.left + $(window).width();
    viewport.bottom = viewport.top + $(window).height();

    // cycle through all images (within visible content) and update src attributes
    $('img[data-src]').each(function() {
        var bounds = $(this).offset();
        bounds.right = bounds.left + $(this).outerWidth();
        bounds.bottom = bounds.top + $(this).outerHeight();

        // if image is within viewable area, display it
        if (!(viewport.right < bounds.left || viewport.left > bounds.right ||
              viewport.bottom < bounds.top || viewport.top > bounds.bottom)) {
            var img = $(this).attr('data-src');
            if (img) {
                $(this).removeAttr('data-src');
                $(this).attr('src', img);
            }
        }
    });
});