logo
Ask your WordPress questions! Pay money and get answers fast! (more info)

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.

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

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!

This question has been answered.

denoizzed | 01/30/13 at 9:22pm Edit
Tutorial: How to assign prize money


(5) Responses

See a threaded view of answers?

Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

  • avatar
    Last edited:
    01/31/13
    12:46am
    Dbranes says:

    Hi, this demo might be of interest to you

    http://nettuts.s3.amazonaws.com/860_preloaderPlugin/index.html

    and the corresponding tutorial is here:

    http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-awesome-image-preloader/

    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>


  • avatar
    Last edited:
    01/31/13
    11:36am
    Christianto says:

    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.


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


    Previous versions of this answer: 01/31/13 at 11:36am

  • avatar
    Last edited:
    01/31/13
    8:26pm
    denoizzed says:

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

    Is it all possible with javascript only?

  • avatar
    Last edited:
    01/31/13
    8:27pm
    denoizzed says:

    Thanks for the input, will check this out.

  • avatar
    Last edited:
    02/01/13
    6:19am
    Christianto says:

    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 lazyload 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.

This question has expired.



denoizzed voted on this question.



Current status of this question: Completed



Please log in to add additional discourse to this page.





Warning: Please do not give out any FTP or ssh credentials to anyone, unless you trust them completely. Giving out login details is dangerous.

If the asker does not get an answer then they have 10 days to request a refund.