show loading gif of image only if it is really loading it for the first time

Question

i have 2 img elements. 2 id's for them: rimg and limg. limg is the loading gif and rimg is the reloaded full vertsion of the image.

the is the code to show the loading before image finish to load:

$("#limg").fadeIn("fast");
$("#rimg").attr("src",$(that).attr("bsrc")).load(function(){
    $("#limg").fadeOut("fast",function () {
        $("#rimg").attr("alt",$(that).attr("alt"));
        $("#rimg").fadeIn("normal");
});
});

if i log into the site for the first time, it shows me the loading gif. if it is not my first time it is still showing that but i need the loading to be smooth without that loading how can i check if the image is loaded and cached before showing the loading gif?

Answer 1

I think this is the only solution for you: if you build the following into your jquery script then will work.

var pic=new Image(x,y);//x,y is optional
pic.src= //path;

if(pic.complete) donePic()
else pic.onload= donePic;

If you put it inside of a timer then you'll know when it gets loaded.