DOMContentLoaded vs load

DOMContentLoaded

The DOMContentLoaded event is fired when the document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading (the load event can be used to detect a fully-loaded page).

具体意思就是:DOMContentLoaded事件的触发时机是当dom框架加载完毕就执行,不用等待css、img其他资源的加载、绘制。兼容性如下图:

由于ie低版本不支持DOMContentLoaded,故采用以下形式(摘自jquery1.2.4):

if ( jQuery.browser.msie && window == top ) (function(){
if (jQuery.isReady) return;
try {
// If IE is used, use the trick by Diego Perini
// http://javascript.nwbox.com/IEContentLoaded/
document.documentElement.doScroll("left");
} catch( error ) {
setTimeout( arguments.callee, 0 );
return;
}
// and execute any waiting functions
jQuery.ready();
})();

具体参见:http://javascript.nwbox.com/IEContentLoaded/

load

The load event is fired when a resource and its dependent resources have finished loading.

具体意思就是:load会等到上述所有资源(dom、css、img等资源)加载绘制完毕才执行。

可见,DOMContentLoaded必先于load。

DOMContentLoaded vs load,布布扣,bubuko.com

时间: 2024-11-01 10:29:18

DOMContentLoaded vs load的相关文章

页面加载事件DOMContentLoaded和load(相关文章)

1:事件DOMContentLoaded和load的区别 http://www.jianshu.com/p/d851...2:JS异步加载的三种方式 http://blog.csdn.net/l5227032... (总结:生活中,我们很多事情要搭建主框架,然后再在主框架的指引下做具体的内容:html页面也是如此,先加载主体的框架也就是dom结构,然后再在里面添加:图片,flash等:这就分别对应两种对应的事件即:DOMContentLoaded和load事件,jquery对应的就是ready和

DOMContentLoaded与load的区别

(1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? (2)我们一再强调将css放在头部,将js文件放在尾部,这样有利于优化页面的性能,为什么这种方式能够优化性能? (3)在用jquery的时候,我们一般都会将函数调用写在ready方法内,这是什么原理? 首先看一下 DOMContentLoaded顾名思义,就是dom内容加载完毕.那什么是dom内容加载完毕呢?我们从打开一个网页说起.当输入一个URL,页面

事件DOMContentLoaded和load的区别

他们的区别是,触发的时机不一样,先触发DOMContentLoaded事件,后触发load事件. DOM文档加载的步骤为 解析HTML结构. 加载外部脚本和样式表文件. 解析并执行脚本代码. DOM树构建完成.//DOMContentLoaded 加载图片等外部文件. 页面加载完毕.//load 在第4步,会触发DOMContentLoaded事件.在第6步,触发load事件.

[转]DOMContentLoaded与load的区别

本文转自 https://www.cnblogs.com/caizhenbo/p/6679478.html (1)在chrome浏览器的开发过程中,我们会看到network面板中有这两个数值,分别对应网 络请求上的标志线,这两个时间数值分别代表什么? (2)我们一再强调将css放在头部,将js文件放在尾部,这样有利于优化页面的性能,为什么这种方式能够优化性能? (3)在用jquery的时候,我们一般都会将函数调用写在ready方法内,这是什么原理? 首先看一下 DOMContentLoaded顾

ready与load的区别

JQuery里有ready和load事件 $(document).ready(function() { // ...代码... }) //document ready 简写 $(function() { // ...代码... }) $(document).load(function() { // ...代码... }) 他们的主要区别为ready先执行,load后执行. DOM文档加载的步骤: (1) 解析HTML结构. (2) 加载外部脚本和样式表文件. (3) 解析并执行脚本代码. (4)

jQuery的document ready与 onload事件——你真的思考过吗?

在进行实验和资料查询时,我遇到了几个关键问题: 1. window.onload到底是什么加载完触发? 2. body为什么会有onload事件? 3. 为什么是window.onload,而不是document.onload? 4. document ready到底是什么ready,DOM渲染完成? 5. jQuery怎么实现$(document).ready? 6. jQuery的ready,还能ready什么? 7. jQuery的document ready就一定比window.onlo

JS高级程序设置笔记(五)

13章:事件 JavaScript与Html之间的交互,是通过事件实现的.可以使用侦听器(或者处理程序)来预定事件. 13.1事件流: 什么是事件流:事件流描述的是从页面中接收事件的顺序. 13.1.1事件冒泡 什么是事件冒泡:可以用一个形象的比喻来描述.小鱼吐泡泡,小鱼在水里,泡泡会从水的最底部一直到水面上结束.事件冒泡和这个意思相近,IE的事件流叫做事件冒泡,是从最具体的元素开始,一直延伸到最顶层的那个结构.意思就是说,比如你创建了一个鼠标点击事件,当你点击这个元素的时候,浏览器会认为你点击

Chrome 开发者工具详解(2):Network 面板

面板上包含了Elements面板.Console面板.Sources面板.Network面板. Timeline面板.Profiles面板.Application面板.Security面板.Audits面板这些功能面板. 这些按钮的功能点如下: Elements:查找网页源代码HTML中的任一元素,手动修改任一元素的属性和样式且能实时在浏览器里面得到反馈. Console:记录开发者开发过程中的日志信息,且可以作为与JS进行交互的命令行Shell. Sources:断点调试JS. Network

JavaScript系列(三)事件

1 事件流 事件冒泡:当一个元素接收到事件的时候,会把他接收到的所有传播到他的父级,一直传播到window.阻止冒泡:在当前要阻止冒泡的事件函数中调用 event.cancleBubble=true;现代的浏览器中默认使用的是事件冒泡机制,由于老版本不支持事件捕获,所以很少有人使用事件捕获.因此建议使用事件冒泡. 2 事件处理程序 在DOM中,用于处理指定和删除事件的处理程序的操作:addEventListener()和removeEventListener().在两种方法中,接收三个参数:要处