隱藏圖像，直到他們加載

我得到了一個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

隱藏圖像，直到他們加載

回答

相關問題