概述:

大家在工作中用jQuery的时候一定会在使用之前这样:
 
1
2
3
4
5
6
7
8
//document ready
$(document).ready(function(){
    ...code...
})
//document ready 简写
$(function(){
    ...code...
})
有些时候也会这么写:
1
2
3
4
//document load
$(document).load(function(){
    ...code...
})
一个是ready一个是load,这两个到底有什么区别呢?

ready与load谁先执行:

大家在面试的过程中,经常会被问到一个问题:ready与load那一个先执行,那一个后执行?答案是ready先执行,load后执行。

DOM文档加载的步骤:

要想理解为什么ready先执行,load后执行就要先聊一下DOM文档加载的步骤:
1
2
3
4
5
6
(1)
解析HTML结构。
(2)
加载外部脚本和样式表文件。
(3)
解析并执行脚本代码。
(4)
构造HTML DOM模型。
//ready
(5)
加载图片等外部文件。
(6)
页面加载完毕。
//load
从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了。但是load要在第(6)步完成之后才执行。

ready事件:

ready事件在DOM结构绘制完成之后就绘执行。这样能确保就算有大量的媒体文件没加载出来,JS代码一样可以执行。

load事件:

load事件必须等到网页中所有内容全部加载完毕之后才被执行。如果一个网页中有大量的图片的话,则就会出现这种情况:网页文档已经呈现出来,但由于网页数据还没有完全加载完毕,导致load事件不能够即时被触发。

总结:

相信大家已经了解了ready与load的区别,其实如果页面中要是没有图片之类的媒体文件的话ready与load是差不多的,但是页面中有文件就不一样了,所以还是推荐大家在工作中用ready。

原 jQuery中document的ready和load事件的区别?的更多相关文章

  1. jQuery中ready与load事件的区别

    1.摘要 大家在编程中使用jQuery还有JS的时候一定会在使用之前这样: //document ready $(document).ready(function(){ ...code... }) / ...

  2. Jquery中$(document).ready()与传统JavaScript中的window.onload方法的区别(2016/8/3)

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间       ...

  3. jQuery中ready与load事件

    jQuery中ready与load事件(来自慕课网) jQuery有3种针对文档加载的方法 $(document).ready(function() { // ...代码... }) //docume ...

  4. Jquery中$(document).ready() 和 JavaScript中的window.onload方法 比较

    Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的.   1.执行时间 win ...

  5. js中window.onload 与 jquery中$(document.ready()) 測试

    js中window.onload 与 jquery中$(document.ready())差别,验证代码例如以下(调换js代码和Jquer代码书写顺序測试.执行结果一样.因此与代码书写位置没关系): ...

  6. jquery中document.ready在两类浏览器中的区别[转]

    DOMready的构建方法不再重复,现代浏览器通过DOMContentLoaded来实现,IE通过readystatechange+doScroll来模拟该方法. 类似jquery中的document ...

  7. jQuery学习一:jQuery中的ready和load事件

    //ready事件 $(document).ready(function(){ 代码........ }); //ready事件简写: $(function(){ 代码........ }); //l ...

  8. jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()..live()和.delegate()之间区别分析,学习jquery的朋友可以参考下.   DOM树   首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的 ...

  9. [转]jQuery中clone和clone(true)的区别

    jquery中clone() 和 clone(true)的区别. jquery复制 DOM的时候,原来还可以连 dom上面绑定的事件一起复制. 原文: https://www.cnblogs.com/ ...

随机推荐

  1. 使用union all 遇到的问题(俩条sql语句行数的和 不等于union all 后的 行数的和 !);遗留问题 怎么找到 相差的呐俩条数据 ?

    create table buyer as SELECT b.id AS bankid FROM v_product_deal_main m, base_member b WHERE b.id = m ...

  2. Spring 中常用注解原理剖析

    前言 Spring 框架核心组件之一是 IOC,IOC 则管理 Bean 的创建和 Bean 之间的依赖注入,对于 Bean 的创建可以通过在 XML 里面使用 <bean/> 标签来配置 ...

  3. shell脚本如何获取当前时间

    在shell脚本里常常需要获取系统时间来处理某项操作,linux的系统时间在shell里是可以直接调用系统变量的如: 获取今天时期:`date +%Y%m%d` 或 `date +%F` 或 $(da ...

  4. Importing/Indexing database (MySQL or SQL Server) in Solr using Data Import Handler--转载

    原文地址:https://gist.github.com/maxivak/3e3ee1fca32f3949f052 Install Solr download and install Solr fro ...

  5. asp.net core 登录身份认证(Cookie)

    asp.net core 2最简单的登录功能 源代码在此 创建asp.net core Web Mvc项目 配置下选项 项目目录结构 在Models文件夹下新建两个实体类 public class T ...

  6. 【明哥报错簿】之 mybatis异常invalid comparison: java.util.Date and java.lang.String

    背景:数据库为postgresql,表字段属性为timestamp格式 原因是mybatis 3.3.0中对于时间参数进行比较时的一个bug. 如果拿传入的时间类型参数与空字符串''进行对比判断则会引 ...

  7. P3984 高兴的津津

    题目描述 津津上高中了.她在自己的妈妈的魔鬼训练下,成为了一个神犇,每次参加一次OI比赛必拿Au虐全场.每次她拿到一个Au后就很高兴.假设津津不会因为其它事高兴,并且她的高兴会持续T天(包包含获奖当天 ...

  8. 【刷题】洛谷 P3806【模板】点分治1

    题目背景 感谢hzwer的点分治互测. 题目描述 给定一棵有n个点的树 询问树上距离为k的点对是否存在. 输入输出格式 输入格式: n,m 接下来n-1条边a,b,c描述a到b有一条长度为c的路径 接 ...

  9. 连接Mysql数据库

    JDBC连接数据库 创建一个以JDBC连接数据库的程序,包含7个步骤: 1.加载JDBC驱动程序: 在连接数据库之前,首先要加载想要连接的数据库的驱动到JVM(Java虚拟机), 这通过java.la ...

  10. Hive:HQL和Mysql:SQL 的区别

    HQL: group by 后面的参数一定要和select非聚集函数一致 where 1 要改成 where 1 = 1