I have the following markup:
What I need is to preload images by jQuery and fade when loaded.
I can't use $(window).load etc because it waits until ALL images are loaded but when there are 50+ images it can take years.
So the question is how to preload images sequentially (which means the image starts to load only when the previous is loaded and faded). Ideally would be to append a gif loader to each image but I can live without that.
Hi, this demo might be of interest to you
and the corresponding tutorial is here:
it uses a jQuery plugin that is called like this:
<ul id="gallery" class="clearfix">
<li><p><a href="#"><img src="images/1.jpg" /></a></p></li>
<li><p><a href="#"><img src="images/2.jpg" /></a></p> </li>
<li><p><a href="#"><img src="images/3.jpg" /></a></p> </li>
<li><p><a href="#"><img src="images/4.jpg" /></a></p></li>
<li><p><a href="#"><img src="images/5.jpg" /></a></p> </li>
Thanks for the input, will check this out.
<blockquote>So the question is how to preload images sequentially (which means the image starts to load only when the previous is loaded and faded). Ideally would be to append a gif loader to each image but I can live without that. </blockquote>
I've done this on my client that need slides image to load after previous image successfully loaded and fade, because they have huge images (more than 10 images and different size - some in KB other in MB!).
If images not loaded sequentially they will see images with less size (KB) first before big size images (MB) and not in correct order. (for example visitor can see 3rd slide image while 1st slide image still loading)
if you setting up your image with src attribute point to images, like:
most browser will automatically load all images,
so in this case, we need to put all images url in custom data attribute, and set images src to transparent .png as filler.
<li><img data-src="http://path-to-images.com/images1.jpg" src="http://path-to-images.com/fill.png"></li>
<li><img data-src="http://path-to-images.com/images2.jpg" src="http://path-to-images.com/fill.png></li>
<li><img data-src="http://path-to-images.com/images3.jpg" src="http://path-to-images.com/fill.png></li>
var slidesImages = jQuery('.slides img');
var image = slidesImages.eq(i),
image_src = image.attr('data-src');
// remove data-src, set image src, fade it and start to load other image
// start load first image
Thanks, but what if I can't change the HTML (it's generated by WordPress)?
popular jQuery plugin to delay image load like [[LINK href="http://www.appelsiini.net/projects/lazyload"]]lazyload[[/LINK]] previously could delay image load without need additional attribute, but now it need to set src on "data-original" atrribute because of latest browser behavior regarding image.
so you need to manipulate the output on server side if you really need to delay images load.
btw, loading images sequentially is not same with preloading images, This is the opposite.
Loading images sequentially means it delay loading image, in your case won't start before previous image loaded.
While preloading means, it will load another images that isn't loaded automatically by browser. This is useful for example if you have gallery with modal/lightbox that contain larger version of image, usually the url define in anchor attribute. So larger version of image will appear instantly.
But most of images preloading tutorial/plugin are only hide images and showing animated loading, before it complete loaded, so user wont see if the image is still loading. Is more likely to refer to user interface than technical.