Are there any advantages to delaying image loading with Javascript?
I have a slideshow on each page that contains images of the object in question. Each slideshow usually contains 5-6 slides of images.
I am thinking to only set the attribute src
on the first 2 images, and otherwise I only set the attribute data-src
on the image file and then load the remaining images after the whole page has been loaded with 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 during the first seconds of the page view, I can defer loading them and let the client load the rest of the content on the page first.
But now I'm thinking again ... Does it really help? I mean, images are not blocked by the render; right? So does it really matter if I load them during page load or load them after page load?
Note that this is not a script that "delays until the user views the image", it just delays it until other resources are loaded.
And what do you think? Does it really help or not? Speed tests like http://tools.pingdom.com don't show any difference.
source to share
So does it really matter if I load them during page load or if I load them after page load?
Just to be clear - we are not comparing lazy loading of images to loading all images. All images will be uploaded regardless of whether the user is viewing them or not.
If the images are not loaded in advance, your $ (window) .load event will theoretically fire earlier (in theory because - see comments at fooobar.com/questions/13217 / ... )
But since you seem to be using document.ready (and I assume you are using the same handler to run the rest of your javascript), this will not affect javascript execution.
Now, getting closer to images clogging up bandwidth - this is browser dependent (see How do I get the browser (IE and Chrome) to request images before scripting? ). This way you can (depending on the browser) see the images loading while holding down subsequent scripts and hence delay the page launch (note that for IE this also depends on whether you are using the normal img tag and loading the image as background css - css background images loaded last)
Next up is the user interface. If your images are large (or the network is slow), the image load lag can see the user actually clicking on the slides before the images are fully loaded.
source to share
Here are my thoughts.
Images often account for most of the downloaded bytes on a web page. As a result, image optimization often yields some of the biggest byte savings and performance improvements for your site. Hence, loading images on demand is the best way to make image / gallery carousels.
There are two main reasons:
1) The user may not even scroll through the images, and all of these images (except for the visible first image) were uploaded for no reason.
2) Bandwidth Consumption - Think mobile devices and users on limited data plans. It also affects the overall page load time, that is, the page load time will be, for example, 5 seconds instead of 4.6 seconds. The difference is hardly noticeable, but if there are 50/100 images.
3) Launching a resource (any resource, not just images) on download when needed, not download, it's all bad for slow connections.
I'm sure there are many other reasons, but I would leave you looking.
SO great minds , please feel free to edit and add your thoughts.
source to share