當事件已完全加載時將事件分配給div

當包含div的所有元素已完全加載時，是否可以將事件分配給div以觸發？例如。如果div包含圖像，則在圖像完全加載時在div上觸發事件。我正在使用jQuery。當事件已完全加載時將事件分配給div

2010-11-12 amateur

不知道你是如何動態地添加內容，但這個例子應該說明它如何工作。

它使用.append()來模擬你的動態加載的內容，然後將追加後，它使用.find()找到圖像，到負載處理程序附加到他們。

最後，它返回length圖像的屬性。然後在加載處理程序中，隨着圖像加載完成，長度遞減。一旦達到0，將加載所有圖像，並運行if()中的代碼。

var len = $('#mydiv').append('<img src = "http://dummyimage.com/150x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/160x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/170x90/f00/fff.png&text=my+image" /><img src = "http://dummyimage.com/180x90/f00/fff.png&text=my+image" />') 
    .find('img') 
    .load(function() { 
     if(--len === 0) { 
      alert('all are loaded'); 
     } 
    }).length;

這種方式，僅基於在#mydiv圖像中的代碼運行。

如果在那裏，是不是動態的，因此不應該得到事件的任何圖像，你應該能夠添加.not()過濾器，以排除那些在complete屬性是true。

將此放在.find()之後和之前。

.not(function(){return this.complete})

來源

2010-11-12 00:50:01 user113716

這是我所遇到的最好的方法+1 – Blowsie 2011-04-07 11:30:34

很難檢查它只有一個div，但我可以建議使用$(window).load()來檢查是否所有的圖像已加載？

更新：如果您使用ajax，然後使用回調查看json何時加載，然後附加$（「div＃id img」）。load（）以查看何時加載所有圖像。唯一的問題是我注意到圖像被緩存的時候，加載器不會被觸發。 :(

來源

2010-11-12 00:32:59

我加載股利動態所以不能使用$（窗口）.load（）的內容。應該說在我原來的問題.. – amateur 2010-11-12 00:38:59

看到我的編輯很快 – 2010-11-12 00:39:38

如果它只是一個像你想等待，你可以使用Ajax加載圖像，然後在Ajax回調觸發事件。

來源

2010-11-12 00:35:19 generalhenry

抓在div所有圖像的onload事件中，有通過提高1一些全局計數器如果計數器等於在div圖像的量......所有圖像加載完畢。應該很簡單，使用jQuery。

這隻適用於圖像，但其他元素沒有onload事件。

來源

2010-11-12 01:16:31

爲了增加暗影精靈的想法，你可以試試下面的代碼：

var totalImages = $(".yourImageClass").length; 
var loadedImages = 0; 
$(".yourImageClass").bind("onload", function() { 
    loadedImages++; 
    if (loadedImages == totalImages) { 
     //all images have loaded - bind event to DIV now 
     $("#yourDiv").bind(eventType, function() { 
      //code to attach 
     }); 
    } 
});

來源

2010-11-12 04:24:34

當事件已完全加載時將事件分配給div

回答

相關問題