大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。
相信写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大事
版权声明:本文博主原创文章。博客,未经同意不得转载。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/116789.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...