检查是否已加载元素及其子元素

时间:2014-08-12 20:46:43

标签: javascript jquery html

我知道jQuery中的.load()函数,以及如何使用回调函数...但是有没有办法检查是否使用if语句加载了一个元素?< / p>

我的理由......我想设置一个间隔并检查一个元素及其所有子元素是否已经完全加载。

var load-interval = setInterval(function(){
    if($('#content').hasBeenLoaded){
        //do stuff
    }
}, 1000);

2 个答案:

答案 0 :(得分:2)

var $content = $('#content');
var intervalId = setInterval(function(){
    if(!$content.is(':empty')){
        //do stuff
        clearInterval(intervalId);
    }
}, 1000);

请注意,spec只包含被认为非空的文本节点的元素:

答案 1 :(得分:1)

在初始页面加载期间,您的DOM元素会在解析文件时逐步创建,但图像资源通常会在引用时异步加载。

因此,当您的网页加载时,解析器会遇到元素<div id="mycontent">

将立即创建此元素,然后创建其子元素,最后将找到该div的结束标记。那时你可以认为DOM本身是#34;加载&#34;对于那个元素。

执行某些操作的最简单方法是在结束标记之后立即将其放在<script>标记中。

如果您还想等待图片资源加载,那么这仍然是放置它的地方。您可以在之前加载的div中查找所有<img>个标记,并注册onload个回调,例如

<div id="mycontent">
    lots of DOM, including image tags
</div>
<script>
(function() {
    var div = document.getElementById('mycontent'); // guaranteed to exist
    var imgs = div.getElementsByTagName('img');

    // put image load detection code here - exercise for the reader
})();
</script>