DOMContentLoaded和window.onload

DOMContentLoaded和window.onload

大家好,又见面了,我是全栈君,今天给大家准备了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账号...

(0)


相关推荐

  • PHP借用Redis消息队列实现高并发下发送邮件功能

    PHP借用Redis消息队列实现高并发下发送邮件功能

  • java springboot中调用第三方接口「建议收藏」

    java springboot中调用第三方接口「建议收藏」调用第三方接口,记录下自己写的不然忘记。依然是废话不喜欢多说,上代码:application.yml配置server:port:7888servlet:context-path:/genetomcat:remote-ip-header:x-forward-foruri-encoding:UTF-8max-threa…

  • 代码主题darcula_darcula主题模式是()模式。_学小易找答案

    代码主题darcula_darcula主题模式是()模式。_学小易找答案【多选题】androidstudio安装并配置完成后,在命令行窗口输入()命令验证配置成功。【填空题】darcula主题模式是()模式。【单选题】当前unity官网最新版本是()【多选题】如何将制表位删除()【单选题】B大调的谱号为:【判断题】受拉的杆件可以简化为一个点,因为除了端头以外,其它任何位置的一点的力学行为都是相同的。【单选题】Android是一种基于()的自由及开放源代码的…

  • mac开发php集成环境「建议收藏」

    mac开发php集成环境「建议收藏」    我是一个使用mac开发的phper,虽然使用mac开发也就不到一年,但是mac上的一些技巧还是掌握的不错的,但实际开发中光有操作技巧是不行的,环境的效率也是很重要的,因为之前一直使用homestead 虚拟机,刚开始还没感觉它有多慢,但是后来感觉homestead真是太慢了,当然这可能也跟电脑的性能有关,我经常启动好几个虚拟机,在上面跑windows系统。…

  • Java开发手册之并发处理

    Java开发手册之并发处理Java开发手册之并发处理

  • 桶排序算法流程图_快速排序算法实例讲解

    桶排序算法流程图_快速排序算法实例讲解前言在数据结构与算法的排序中,我们很多人可能更多的熟悉冒泡排序、快速排序、归并排序。可能对堆排序、桶排序、计数排数等比较生疏,其实这个也没啥复杂的,算法的排序中,我们很多人可能更多的熟悉冒泡排序、快速排序、归并排序。可能对堆排序、桶排序、计数排数等比较生疏,其实这个也没啥复杂的,桶排序是所有排序中最简单的排序之一。没毛病老铁,就是最简单的之一。桶排序思想…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号