如何判断一个元素被加载完成了？ |
您所在的位置：网站首页 › 检查页面自定义函数 › 如何判断一个元素被加载完成了？ |
|
要监听元素的状态
如果我要判断 img 已经加载完毕 用什么方法可以判断呢 ?
在IE下面可以用这样的方法
var oImg = document.getElementById("img");
if(oImg.readystate=="complete")
{
alert("图片已经加载完成");
return false;
}
火狐下面可以用这样的方法
后来在博客的评论中看到了这句话 chrome、safari【Webkit525以后的】,firefox,ie9,ie10,opera,用DOMContentLoaded，chrome、safari【Webkit525】以前的版本用document.readyState判断，对于IE6，IE7，IE8，由于不支持DOMContentLoaded，就用doScroll方法，这个方法在DOM解析完成后才可以调用，具体为什么，参考这个网站，http://javascript.nwbox.com/IEContentLoaded/，jQuery的ready方法就是参考这个的。 于是百度发现可以 用DOMContentLoaded判断DOM是否加载完成。 当初始HTML文档被完全加载和解析时，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架完成加载。另一个不同的事件 load 应该仅用于检测一个完全加载的页面。 在使用 DOMContentLoaded 更加合适的情况下使用 load 是一个非常流行的错误，所以要谨慎。 例子 document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); }); document.addEventListener("DOMContentLoaded", function(event) { console.log("DOM fully loaded and parsed"); }); for(var i=0; i // 如果我们能判断出DOM已可能，忽略 if(domReady.done) return false; // 检查若干函数和元素是否可能 if(document && document.getElementsByTagName && document.getElementById && document.body) { // 如果可用，我们停止检查 clearInterval(domReady.timer); domReady.timer = null; // 执行所有正在等待的函数 for(var i = 0; i < domReady.ready.length; i++) { domReady.ready[i](); // 记录我们在此已经完成 domReady.ready = null; domReady.done = true; } } }现在我们来看看在HTML文档中是如何执行的。假设已经将domReady函数写到一个名为domready.js的外部文件中 Testing DOM Loading domReady(function(){ alert("The DOM is loaded!"); // do something }); Testing DOM Loading 相关知识DOMContentLoaded和load事件的区别是，触发的时机不一样，先触发DOMContentLoaded事件，后触发load事件。 DOM文档加载的步骤为 解析HTML结构。加载外部脚本和样式表文件。解析并执行脚本代码。DOM树构建完成。//DOMContentLoaded加载图片等外部文件。页面加载完毕。//load在第4步，会触发DOMContentLoaded事件。在第6步，触发load事件。 参考文献http://blog.csdn.net/nailwl/article/details/4534646 http://www.cnblogs.com/ninofocus/archive/2012/11/11/2764640.html http://www.tuicool.com/articles/aae2me http://www.jianshu.com/p/d851db5f2f30 https://developer.mozilla.org/zh-CN/docs/Web/Events/DOMContentLoaded |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |