jquery - 如何知道DIV中的所有元素是否已完全加载？

Question

有一个 div，其中将通过 Ajax 加载一些元素(图像、iframe 等)。这些元素完全加载后，我需要为 div 执行一个函数。

如何确定 div 中的所有元素是否已完全加载？

我使用 jQuery 作为库。

Answer 1

对于图像和 iframe，您可以使用 load 事件:

// get all images and iframes
var $elems = $('#div').find('img, iframe');

// count them
var elemsCount = $elems.length;

// the loaded elements flag
var loadedCount = 0;

// attach the load event to elements
$elems.on('load', function () {
    // increase the loaded count 
    loadedCount++;

    // if loaded count flag is equal to elements count
    if (loadedCount == elemsCount) {
        // do what you want
        alert('elements loaded successfully');
    }
});

您应该在通过 Ajax 将元素附加到 #div 元素后执行上述脚本。