3

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.

Marcus Lind
  • 10,374
  • 7
  • 58
  • 112
  • Thats a good question. Loading 1 image `must` be faster that load more images. So everything depends on your lazy loading method. – Petroff Apr 28 '15 at 10:15
  • Yes, but does it help the rest of the DOM load faster? Because that's the point. If I load 5 images right after eachother, or if I load 1, then the rest of the DOM, and then the other 4 images. Is there any performance gain or percieved performance gain? – Marcus Lind Apr 28 '15 at 10:17
  • Ye it will be faster. I can't tell how much faster. But that can broke your slider if you do not w8 the image get loaded. Keep it in mind. – Petroff Apr 28 '15 at 10:19
  • @LShetty, convert your comment to an answer, add a couple of more examples and you got a winning answer I'll happily upvote. – Alex Apr 28 '15 at 11:04

2 Answers2

2

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.

Community
  • 1
  • 1
potatopeelings
  • 40,709
  • 7
  • 95
  • 119
1

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.

lshettyl
  • 8,166
  • 4
  • 25
  • 31
  • But in the case above, the images are not loaded "on demand". They are just loaded when the rest of the document has been loaded. So it still loads all images. So basically you are saying, loading "on demand" is good. But delaying images to after the DOM has been loaded completely? Benifitial? – Marcus Lind Apr 28 '15 at 17:08