Wait with image replace until image is loaded

Question

I have a working script (thanks stackexchange!) for exchanging an image on the fly. I use it as a gallery script. It looks like this:

           $(".source a").click(function(e){
                e.preventDefault();
                var $a = $(this);
                $("#targetcontainer img").hide("puff", function(){
                    $(this).attr("src", $a.attr("href")).show("fold");
                });
            });

The problem regarding this script is that the old image flickers after the JQ show command. The new source Image shows up a second or so later which makes a weird effect. how can I prevent this from happening?

Answer 1

The best way to make this work in all browsers with the minimal amount of delay is to use CSS sprites.

If that's not an option for you, you could pre-load the image somewhere and make it invisible -- the browser will load the image early, and won't delay when your JQuery exectues.

Answer 2

In JQuery there is load event.

1) Retrieve image.

var image = $("#img");
image.hide();

2) On load do something.

image.load(function(){
 image.show();
});

3) Change src attribute to fire load event after image has changed.

image.attr("src","image.jpg");

You can read more about it in here: http://api.jquery.com/load-event/

Answer 3

You could preload the image before attempting to display it...

$(".source a").click(function(e) {
    e.preventDefault();

    var newSrc = this.href,
        image = new Image();    

    image.onload = function() {
        $("#targetcontainer img").hide("puff", function() {
            $(this).attr("src", newSrc).show("fold");
        });
    }
    image.src = newSrc;
});