CODEWITHSUNDEEP
javascriptjqueryhtmlperformance
Marcus Lind
Marcus Lind

Reputation: 11470

Is there any benifit to delay loading of images with Javascript?

I have a slideshow on every page that contains images of the object the page is about. Each slideshow usually contains 5-6 image slides.

What I'm thinking is to only set the src attribute on the first 2 images, and on the rest I only set data-src attribute to the image file, and then I load the rest of the images after the whole page has been loaded with the help of this Javascript:

function loadImages() {
    $('#house-carousel .item img').each(function(){
        if($(this).attr('data-src')){
            $(this).attr('src', $(this).attr('data-src'));
        }
    });
}

$(document).ready(loadImages);

The thought process was that since the images are not displayed to the user for the first seconds of viewing the page, I can delay loading them and let the client download the rest of the content on the page first.

But now I'm thinking again... Does that really help? I mean, images are not render blocking; right? So does it really matter if I load them while the page is loading, or if I load them after the page has loaded?

Notice, it's not a script that "delays until the user views the image", it just delays it until the other resources has loaded first.

So what do you think? Does this really help or not? Speedtests such as http://tools.pingdom.com doesnt show any difference.

Upvotes: 3

Views: 118

Answers (2)

potatopeelings
potatopeelings

Reputation: 41075

So does it really matter if I load them while the page is loading, or if I load them after the page has loaded?

Just to be clear - we are not comparing lazy loading of images vs. loading all images. All the images will be loaded irrespective of whether the user views them or not.

If the images are not loaded upfront, your $(window).load event theoretically fires earlier (theoretically because - see comments in https://stackoverflow.com/a/545005/360067)

But since you seem to be using document.ready (and I presume you use the same handler to start up the rest of your javascript) this would not make a difference for your javascript execution.

Now, coming to images hogging the bandwidth - it varies by browser (see How to make the browser (IE and Chrome) request images before scripts?). So you might (depending by browser) see the images download holding up subsequent scripts and hence delaying the page startup (note that for IE it also depends on whether you use a normal img tag vs loading an image as a css background - css background images are loaded last)

Next, user experience. If your images are large (or the network is slow), delay loading the images may see the user actually clicking through the slides before the images have fully loaded.

Upvotes: 2

lshettyl
lshettyl

Reputation: 8181

Here are my thoughts.

Images often account for most of the downloaded bytes on a web page. As a result, optimizing images can often yield some of the largest byte savings and performance improvements for your website. Hence, load images on demand is the best way to do image carousels/galleries.

The 2 main reasons being:

1) The user may not even scroll thru the images and all those images (except the visible first image) have been loaded for no reason.

2) Bandwidth consumption - think of mobile devices and users on limited data plans. It also affects on the total page load time, meaning the page load time would be, for instance, 5 secs as opposed to 4.6 secs. The difference is hardly noticeable, but, would be, if there are 50/100 images.

3) Triggering resource (any resource, not just images) downloads when needed instead of loading it all is bad for slow connections.

I am sure there are plenty of other reasons, but, I'd leave you to figure out.

SO great minds, please feel free to edit and add your thoughts as well.

Upvotes: 1

Related Questions