Pay money and get answers for your WordPress questions (more info)

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

  • SOLVED

Hello,

I have the following markup:


<ul class="slides">
<li><img src=""></li>
...
<li><img src=""></li>
</ul>


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.

Thanks!

Answers (2)

2013-01-30

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>



denoizzed comments:

Thanks for the input, will check this out.

2013-01-30

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);
});



denoizzed comments:

Thanks, but what if I can't change the HTML (it's generated by WordPress)?

Is it all possible with javascript only?


Christianto comments:

I think I can't be done, latest browser will download image even if we manipulate it with JavaScript,
the process is started right after the images DOM created, even if we remove the attribute/images with Javascript..

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.