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

Question

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

Answer 1

不確定您是如何動態添加內容的，但此示例應說明它是如何工作的。

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

最后，它返回圖像的length屬性。 然后在加載處理程序中，當圖像完成加載時，長度遞減。 一旦它變為0 ，所有圖像都被加載，並且if()內的代碼運行。

示例： http ： //jsfiddle.net/ehwyF/

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的圖像#mydiv 。

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

將這個后.find()和前.load()

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

Answer 2

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

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

Answer 3

如果它只是一個你想要等待的圖像，你可以用ajax加載圖像，然后在ajax回調中觸發事件。

Answer 4

要添加Shadow Wizard的想法，您可以嘗試以下代碼：

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 
        });
    }
});

Answer 5

捕獲div中所有圖像的onload事件，在那里將一些全局計數器提高1.如果該計數器等於div中的圖像數量...所有圖像都完成加載。 使用jQuery應該很簡單。

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