Image Preloader Problem

Question

i came up with this code and found out that in the first load of image, the transition works fine but at the second time, the transition will not appear.

    var imgIndex = 0;
    SlideImages();

    function SlideImages()
    {
        $("<img />").attr("src",theImages[imgIndex]).attr("style","display:none;").load(function(){

            $(this).appendTo("div.picCon");
            $(this).show("<?php echo $portfolioTransition; ?>",<?php echo $effectDuration; ?>,function(){
                setTimeout( hideImg,2000);
            });
        });            
    }

    function hideImg()
    {
        $("div.picCon img:visible").fadeOut(function(){
            $("div.picCon").empty();
            imgIndex = (imgIndex<theImages.length)?imgIndex+1:0;
            SlideImages();
        });

    }

where the $portfolioTransition = "bounce"; $effectDuration = 1000;

is there any method that will execute if the image is in the cache already? or is there any alternative way so that my code below will work.. :)

i got this to work in safari but not in chrome..

 function SlideImages()
    {
        $("<img />").attr("src",theImages[imgIndex]).attr("style","display:none;").one("load",function(){
            $(this).appendTo("div.picCon");
            $(this).show("<?php echo $portfolioTransition; ?>",<?php echo $effectDuration; ?>,function(){
                setTimeout( hideImg,2000);
            });
        }).each(function(){
            if(this.complete)$(this).trigger("load");
        });
    }

Answer 1

This is documented in the jQuery docs.

It is possible that the load event will not be triggered if the image is loaded from the browser cache. To account for this possibility, we can use a special load event that fires immediately if the image is ready. event.special.load is currently available as a plugin.

Plugin

Haven't used it myself, but it seems you can just include that plugin without changing your code as it intercepts the regular load-event.

Answer 2

Quoting from the jQuery API .load()

It is possible that the load event will not be triggered if the image is loaded from the browser cache.

I believe setting the load handler before setting the src attribute might do the trick. Try changing their chain order in your code to

$("<img />").attr("style","display:none;");
            .load(function(){...})
            .attr("src",theImages[imgIndex])

Updated answer

Here is the full code and demo working correct (i believe) http://www.jsfiddle.net/HkXBw/

The changes needed were

1. Set the load event before setting the src attribute of the image
2. Fire the load event manually if the image has completed loading
3. use the one() method when binding the load event to compensate for different browsers working directly with #1 (without the need for #2) and others not (we only want the load to fire once)
4. fix the way you increase the counter of the images.

In essence we combine the trick i suggested and your own workaround, but also introduce a change because each trick works in different browsers, and we want to only use one of the two tricks and not both..