Lazy loading images with JavaScript

Nov 24, 2013

During the rebuild of my Videouri project, I was constantly looking for the best approach of writing and serving all the modules involved, and onto that matter, I decided to do a bit of investigation into implementing a lazy load for the images. First thing that came into my head was to server the images, upon DOM ready with the help of jQuery:

$(function(){
    $('img.to-load').each(function(index, object) {
        $(this).attr('src', $(this).data('src'));
    });
});

It’s a partial solution, that is better than nothing. But I decided to investigate a little bit, and see what other people come up with for the same goal, or what suggestions they had. What I found, is that there are both server side and client side solutions.

Now you decide what to try, and if you have any comments about this matter, please do share. I personally have implemented the LazyLoad by tuupola, and so far everything is going great.