Simple jquery image lazy load

Sometimes you want to speed up the loading time of a web page, when you have a lot of images it can be useful to load them a little bit after the page is loaded so you can let the user read the content before all images are loaded.

A simple way to get a lazy load images on any web page using jQuery is doing in you HTML code:

<p>...</p>
<img alt="..." data-src="/path/to/image" src="">
...

As you can tell the src attribute for the image is empty so the browser will not load the image until two seconds later, we are going to do so a few seconds later, in your JS code:

$(function () {
    setTimeout(function () {
        $('img[data-src]').each(function () {
            $(this).attr('src', $(this).data('src'));
        });
    }, 2000);
});

This way you will get your images to load a little bit later than your content.