如何知道DIV中的所有元素是否都已完全加载? [英] How to know if all elements in a DIV have been fully loaded?

问题描述

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

There is a div in which there will be some elements (images, iframe, etc) being loaded via Ajax. After those elements have been fully loaded, I need to execute a function for the div.

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

How do I determine if all elements in the div have been fully loaded?

我使用jQuery作为库.

I use jQuery as the library.

推荐答案

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

For images and iframes you can use load event:

// 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元素之后执行上述脚本.

You should execute the above script after appending your elements via Ajax into your #div element.

这篇关于如何知道DIV中的所有元素是否都已完全加载?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！