Preload and fade images one-by-one w/ jQuery. WordPress

Dbranes answers:

Hi, this demo might be of interest to you

[[LINK href="http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html"]]http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html[[/LINK]]

and the corresponding tutorial is here:

[[LINK href="http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/"]]http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/[[/LINK]]

it uses a jQuery plugin that is called like this:

<script type="text/javascript">
$(function(){

$("#gallery").preloader();

});
</script>


where

<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>
</ul>


---

Christianto answers:

<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:
<ul class="slides">
<li><img src="http://path-to-images.com/images1.jpg"></li>
<li><img src="http://path-to-images.com/images2.jpg"></li>
<li><img src="http://path-to-images.com/images3.jpg"></li>
</ul>
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.
<ul class="slides">
<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>
</ul>


and have javascript function to set the src when the image successfully loaded, and load next image after that, for example with jQuery:
jQuery(document).ready(function($){
var slidesImages = jQuery('.slides img');
slidesImages.css('opacity',0);

function loadMyImage(i){
var image = slidesImages.eq(i),
image_src = image.attr('data-src');
$('<img />').load(function(){
// remove data-src, set image src, fade it and start to load other image
image.removeAttr('data-src');
image.attr('src',image_src).animate({opacity: 1},500);
if(i<slidesImages.length)
loadMyImage(i+1);
}).attr('src',image_src);
}

// start load first image
loadMyImage(0);
});

---

---