Question

我有一个jQuery脚本，它在某个时间间隔将数据附加到“holder”。数据如下所示：

<div class="item-box etc etc"> <img src="data.png"> </div>

我一次加载50张图片，我的目标是在加载每张图片时使它们fadeIn。

我尝试了以下内容：

parentDiv.on("load", "img", function() {
    $(this).parent().fadeIn(500);
});

小提琴：http://jsfiddle.net/3ESUm/2/

但似乎on方法没有load或ready方法。我没有想法了。

Answer 1

添加图片时只需设置onload属性。

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

参见工作示例here

Answer 2

您可以按照首先显示的顺序添加图像，如下所示：

演示：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];
}

隐藏图像，直到它们被加载

2 个答案: