after changing src of img display processing.gif untill real img loads

Question

Possible Duplicate:
How to show a spinner while loading an image via JavaScript

I have an img, next btn and previous btn

Next button loads next image as

crntSrc=$("img").attr('src');
nextSrc=(crntSrc+1);
$("img").attr('src',nextSrc);

but I want to show process.gif image until nextSrc completely loads.

Similar question : http://stackoverflow.com/questions/4635388/how-to-display-loading-image-while-actual-image-is-downloading — Radi, Oct 11 '12 at 19:59

score 1 · Answer 1 · answered Oct 11 '12 at 19:57

1

You could try to set the process.gif as background of your image in css:

img{
 background:url('process.gif') no-repeat center;   
}

answered Oct 11 '12 at 19:57

Andy

29,707
9
41
58

score 1 · Accepted Answer · answered Oct 11 '12 at 19:57

You can do something like this:

function preload(src, cb)
{
    var img = new Image();
    img.load = cb;
    img.src = src;
}

var newImage = "/foo/foo.jpg";

// Function is called after image is loaded into memory.
preload(newImage, function(){
    $("#afterloadimg").attr("src", this.src);
});

after changing src of img display processing.gif untill real img loads

2 Answers2