Hide images until they're loaded

Question

I got a jQuery script which is dinamically appending data to the \"holder\" at some timeinterval. The data looks like this:

        
                      

              相关标签:
       
      

Answer 1

just set the onload property when you add the image.

var img = new Image();
img.src = "some url"
img.onload=function(){$(img).fadeIn(500);}
document.getElementByID('parent').appendChild(img);

see working example here

Answer 2

You can add your images in first-loaded-first displayed order like this:

Demo: http://jsfiddle.net/m1erickson/7w6cb/

var imageURLs=[];
var imgs=[];
imageURLs.push("house100x100.png");
imageURLs.push("house32x32.png");
imageURLs.push("house16x16.png");

for(var i=0;i<imageURLs.length;i++){

    imgs.push(document.createElement("img"));
    imgs[i].onload=function(){
        var id=this.myId;
        this.id=id;           
        document.body.appendChild(this);
        $("#"+id).hide().fadeIn(1500);
    }
    imgs[i].myId=i;
    imgs[i].src=imageURLs[i];
}