如何知道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元素之后执行上述脚本

Answer 2

请详细说明您的问题。对于不同类型的元素，有不同的方法。

对于iframe，请遵循此线程，如何检测是否加载了iframe？

对于图像http://api.jquery.com/load-event/

对于flash来说，这取决于很多事情。如何判断Flash是否已加载到网站上？