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事件回调
ready与load的区别的更多相关文章
- jQuery中ready和load的区别
<span style="white-space:pre"> </span>//document ready $(document).read ...
- DOM加载过程中ready和load的区别
在浏览器地址栏输入URL地址,浏览器开始加载页面时,有以下几个过程 1.浏览器开始解析HTML文档 2. 浏览器遇到HTML文档中的<script>元素以及CSS样式文件,并且没有asyn ...
- jQuery中ready与load事件的区别
1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...
- 原 jQuery中document的ready和load事件的区别?
概述: 大家在工作中用jQuery的时候一定会在使用之前这样: 1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){ ...
- jQuery中ready与load事件
jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...
- document.ready和onload的区别
转自:http://holysonll.blog.163.com/blog/static/2141390932013411112823855/ document.ready和onload的区别——Ja ...
- jQuery学习一:jQuery中的ready和load事件
//ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...
- JS 页面加载触发事件 document.ready和onload的区别(转)
原博地址:http://blog.163.com/zhaoyanping_1125/blog/static/20132915320111129113723710/ * document.ready和o ...
- JS 页面加载触发事件 document.ready和onload的区别
document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件: 一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件): 二是onlo ...
随机推荐
- VS - ActionFilterAttribute
Global.asax.cs public class MvcApplication : System.Web.HttpApplication { public static void Registe ...
- 【mysql】知识点
mysql执行原理 只要是B/S架构,都是会有客户端与服务端,mysql也不例外. 首先客户端发出一个请求,这个请求就是一个查询请求(Select),而它请求的对象就是服务端,服务端是怎么处理这项查询 ...
- 鼠标经过提高层级案例(margin,相对定位,z-index)
<body> <ul> <li class="box1">1</li> <li class="box2"& ...
- JS发送验证码;并设置cookie
Tool.send_code = function(obj) { var isCheck = true, form = $('#editInfo_Form'); var mobile = form.f ...
- AtCoder Grand Contest 012题解
传送门 \(A\) 肯定是后面每两个陪最前面一个最优 typedef long long ll; const int N=5e5+5; int a[N],n;ll res; int main(){ s ...
- Matlab中画图数学公式的输出格式
1.可以在输出参数中选择 ('Interpreter', 'latex'). 2.字符序列中的数学表达式需用$$等形式括起来. 例子: text(6, 0.3, '$\leftarrow y= 2^ ...
- [loj 6496]「雅礼集训 2018 Day1」仙人掌
传送门 Description 给出一张 \(n\)个点 \(m\)条边的无向连通图,其中每条边至多属于一个简单环,保证没有自环,可能有重边.你需要为其中每条边定向,其中第 \(i\)个点的出度不能超 ...
- VOT-2016 代码评测工具的使用说明
VOT-2016 代码评测工具的使用说明 2018-10-14 09:37:04 VOT-2016 官网:http://www.votchallenge.net/vot2016/ 评测代码链接:htt ...
- springIoC注解
一.通过注解注入Bean @Component:组件(spring扫描包下有该注解的类) @ComponentScan(包名):组件扫描(spring扫描该包名下的类) @Configuration: ...
- sass - for循环写法
如要设置多个li的动画延迟时间时 注:这里选择器要加#{}才行 不然就会编译成: 6.7. 插值语句 #{} (Interpolation: #{}) 通过 #{} 插值语句可以在选择器或属性名中使用 ...