如何判断一个元素被加载完成了？

来源：互联网发布：手机logo设计软件编辑：程序博客网时间：2024/06/05 23:43

要监听元素的状态

如果我要判断 img 已经加载完毕  用什么方法可以判断呢 ?   在IE下面可以用这样的方法     var oImg = document.getElementById("img");     if(oImg.readystate=="complete")     {       alert("图片已经加载完成");       return false;     }   火狐下面可以用这样的方法  <img src='' onload='alert("done");'/>

后来在博客的评论中看到了这句话

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 是一个非常流行的错误，所以要谨慎。

例子

<script>  document.addEventListener("DOMContentLoaded", function(event) {      console.log("DOM fully loaded and parsed");  });</script><script>  document.addEventListener("DOMContentLoaded", function(event) {      console.log("DOM fully loaded and parsed");  });  for(var i=0; i<1000000000; i++){      // 这个同步脚本将延迟DOM的解析。      // 所以DOMContentLoaded事件稍后将启动。  } </script>

 最简单的操作却是最慢的。在加载过程的顺序列表中，你会注意到页面的加载完毕与否完全被最后一步所掌控。这就是说，如果页面有很多的图片、视频等，用户可能得登上一段时间JavaScript才执行。

另一种技术

可用以监听 DOM 加载状态，可能是最复杂的（从实现角度来看），但也是最有效地。这项技术在不堵塞浏览器加载的情况下尽可能快地检查 HTML DOM文档是否已经加载了执行所必须得属性。以下是检查HTML DOM是否可用的几个要点：

document: 你需要知道DOM文档是否已经加载。若能足够快地检查，运气好的话你会看到undefined。document.getElementsByTagName和document.getElementById：频繁使用document.getElementsByTagName和document.getElementById函数检查文档，当存在这些函数则表明DOM已经加载完毕。document.body: 作为额外补充，检查元素是否已经完全加载。理论上前一个检查应该已经能做出判断，但我发现有些情况下还是不够。

使用这些检查就足够判断DOM是否可用了（“足够”在此表示可能会有一定毫秒级的时间差）。这个方法几乎没有瑕疵。单独使用前述检查，脚本应该可以在现代浏览器中运行得相对良好。但是，Firefox实现了缓存改进，使得window加载事件实际上可以在脚本能检查到DOM是否可用之前触发。为了能发挥这个优势，我同时为window加载事件附加检查，以期能获得更快的执行速度。

最后，domReady函数集合了所有需要在DOM可用时就执行的函数的引用。一旦DOM被认为是可用的，就调用这些引用并按顺// 监听 DOM 是否可用

function domReady(f) {    // 假如DOM已经加载，马山执行函数    if(domReady.done) return f();    // 假如我们已经增加了一个函数    if(domReady.timer) {        // 把它假如待执行函数清单中        domReady.ready.push(f);    } else {        // 为页面加载完毕绑定一个事件，以防它最先完成。        addEvent(window, "load", isDOMReady);        // 初始化执行函数的数组        domReady.ready = [f];        // 尽可能快的检查DOM是否已可用        domReady.timer = setInterval(isDOMReady, 13);    // 检查 DOM 是否function isDOMReady() {    // 如果我们能判断出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的外部文件中

<html>    <head>        <title> Testing DOM Loading</title>        <script src="domready.js"></script>        <script>            domReady(function(){                alert("The DOM is loaded!");                // do something            });        </script>    </head>    <body>        <h1>Testing DOM Loading</h1>        <!-- 这里是大量的HTML -->    </body></html>

参考文献

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

阅读全文

0 0

如何判断一个元素被加载完成了？

要监听元素的状态

用DOMContentLoaded判断DOM是否加载完成

另一种技术

相关知识

参考文献