隐藏图像，直到他们加载

我得到了一个jQuery脚本，它是在一定的时间间隔将数据附加到“持有者”。数据是这样的：隐藏图像，直到他们加载

<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方法。我用完了想法。

来源

2014-02-12 Deepsy

你确定你在图像已经加载后没有附加侦听器？ –

你应该选择一个答案 –

只需在添加图像时设置onload属性即可。

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

看到工作示例here

来源

2014-02-12 18:42:24

如果我正在加载元素，这不会真正起作用。看到提出的小提琴。 – Deepsy

检查更新后的答案。我提供了一个工作小提琴。 –

您可以先装一阶显示这样的添加您的图像：

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

来源

2014-02-12 19:43:03 markE

隐藏图像，直到他们加载

回答

相关问题