DOMContentLoaded和window.onload

大家好，又见面了，我是全栈君

相信写js的。都知道window.onload吧，可是并非每一个人都知道DOMContentLoaded，事实上即使你不知道。非常有可能你也常常使用了这个东西。

普通情况下，DOMContentLoaded事件要在window.onload之前运行，当DOM树构建完毕的时候就会运行DOMContentLoaded事件，而window.onload是在页面载入完毕的时候，才运行。这当中包含图片等元素。大多数时候我们仅仅是想在DOM树构建完毕后，绑定事件到元素。我们并不须要图片元素。加上有时候载入外域图片的速度很缓慢。

我们能够写代码来简单測试一下这两种事件：

javascript代码（引入了jQuery1.4.1)：

if (document.addEventListener){ function DOMContentLoaded(){ $( "#status" ).text( "DOM is ready now!" ); } document.addEventListener( "DOMContentLoaded" , DOMContentLoaded, false ); } window.onload= function (){ $( "#status" ).text( "DOM is ready AND wondow.onload is excute!" ); }

HTML 代码 body 部分：

<h1> DOM READY's TEST </h1>
<img src="./delay.php" alt="delay image" />
<p id="status"> DOM is not ready </p>

复制

为了清楚的看到效果，特意写个简单的php文件，提供图片延时载入，代码例如以下：

sleep(5);
header('Location:./delay.png');

复制

在firefox和chrome以及opera中都能够清楚的看到，在图片未载入之前。id为status的段落已经显示了“DOM is ready now!”。然后等5秒钟后，图片载入完毕后，此段落显示”DOM is ready AND wondow.onload is excute!”

此代码并不能在IE中工作，一方面是由于我使用的是addEventListener，開始前做了个推断，不存在此方法则不加入此事件。这样做的原因是IE确实是不支持DOMContentLoaded这个事件的，为了代码的简单。就没为IE写了。尽管IE没有此事件，可是我们却能够来模拟这个事件，常见的方法是推断element的doScroll假设成功则说明DOM加载完毕。

常见的库中都提供了此事件的兼容各个浏览器的封装。假设你是个jQuery使用者，你可能会常常使用(document).ready();或靠(function(){}) 这是用来DOMContentLoaded大事

版权声明：本文博主原创文章。博客，未经同意不得转载。

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/116789.html原文链接：https://javaforall.cn