Simple jquery image lazy load

Camilo Nova

Camilo Nova


1 min read.

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:

<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.

Get a monthly update from our CEO:

Learn about how we think:

How to get a list of most popular pages from Google Analytics in Python?

Let's look at how to get a list of most popular pages from Google Analytics using Python (Django).

Vera Mazhuga

Vera Mazhuga

Published Apr 29, 2014

10 reasons why I love PyCharm

I think that the main advantage of IDE is that helps a lot when one works in a big team and needs to switch between proj...

Vera Mazhuga

Vera Mazhuga

Published Apr 28, 2014

Introduction To JavaScript Unit Testing Using QUnit

During the last years, web applications have become more interactive, and that job no longer rely on Flash, instead, we tend...

Pablo Vallejo

Pablo Vallejo

Published Apr 25, 2014

Own your tech to own your destiny.

Let's Talk