ready与load的区别

JQuery里有ready和load事件

$(document).ready(function() {// ...代码...
})
//document ready 简写
$(function() {// ...代码...
})
$(document).load(function() {// ...代码...
})

他们的主要区别为ready先执行，load后执行。

DOM文档加载的步骤：

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

从上面的描述中大家应该已经理解了吧，ready在第（4）步完成之后就执行了，但是load要在第（6）步完成之后才执行。

结论：

ready与load的区别就在于资源文件的加载，ready构建了基本的DOM结构，所以对于代码来说应该越快加载越好。在一个高速浏览的时代，没人愿意等待答案。假如一个网站页面加载超过4秒，不好意思，你1/4的用户将面临着流失，所以对于框架来说用户体验是至关重要的，我们应该越早处理DOM越好，我们不需要等到图片资源都加载后才去处理框架的加载，图片资源过多load事件就会迟迟不会触发。

一个实例：

document.addEventListener("DOMContentLoaded", function() {console.log('DOMContentLoaded回调')
}, false);window.addEventListener("load", function() {console.log('load事件回调')
}, false);console.log('普通方法一')//测试加载
$(function(){console.log('jquery ready')
})console.log('普通方法二')

执行的顺序为：

普通方法一
普通方法二
jquery ready
DOMContentLoaded回调
load事件回调

转载于:https://www.cnblogs.com/dtdxrk/p/4137374.html

ready与load的区别相关推荐

DOM加载过程中ready和load的区别
在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...
jQuery中ready与load事件的区别
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. jQuery中ready与load事件的区别概述: 大家在工作中用jQuery的时候一定会在使用之 ...
“约见”面试官系列之常见面试题之第六十九篇之document.ready和onload的区别（建议收藏）
document.ready和onload的区别为:加载程度bai不同du.执行次数不同.执行速度zhi不同. 一.加载程度不同 1.document.ready:在DOM加载完成dao后就可以可以对 ...
ready与onload的区别
文章目录两种方法介绍不同结论加载时间不同.监听次数不同两种方法介绍等待DOM载入完成之后在执行操作的方法有两种 onload: window.onload =function(){} re ...
ready 和 onload 的区别
ready 和 onload 的区别 $(document).ready()和window.onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上$(document) r ...
document.ready和onload的区别
document.ready和onload的区别--JavaScript文档加载完成事件页面加载完成有两种事件一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件) 二是on ...
$(document).ready、body.Onload()和 $(window).load的区别
JavaScript文档加载完成事件 window.load(function(){...})和body.onload()都存在同样一个问题,那都是在页面所有元素(包括html标签以及引用到得所有图片 ...
JQuery 中load、ready 和 onload 的区别
$(document).ready() 和 window.onload 在表单上看都是页面加载时我们就去执行一个函数或动作,但是在具体的细节上 $(document).ready() 和 window ...
DOMContentLoaded与load的区别
JavaScript 中的以下代码 : Window.onload= function (){//代码 } 等价于 Jquery 代码: $(window).load(function (){//代码 ...

ready与load的区别

ready与load的区别相关推荐

最新文章

热门文章