摘自:http://www.cnblogs.com/see7di/archive/2011/07/15/2239677.html

为了理解这两个事件的异同,读者应该先了解HTML文档加载的顺序。

DOM文档加载是按顺序执行的,这与浏览器的渲染方式有关系。一般浏览器渲染操作的顺序大致按如下几个步骤来完成。
(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。
(5) 加载图片等外部文件。
(6) 页面加载完毕。

具体说明如下。

1. 执行时机

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

开发人员习惯把页面初始化设置的脚本都放在load事件处理函数中,由于页面数据没有完全加载进来,导致网页文档呈现和脚本初始化配置不能够保持同步,从而影响了页面的可用性。

而jQuery的ready事件是在DOM结构绘制完毕之后就执行,也就是说它在外部文件加载之前就被执行了,这样就能够确保网页文档的呈现和脚本初始化设置保持同步。

总之,ready事件先于load事件被激活,如果网页文档中没有加载外部文件,则它们的响应时间基本上是相同的。

jQuery的ready与js的load事件的区别的更多相关文章

  1. jQuery $(document).ready()和JavaScript window.onload()事件的区别

    一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...

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

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

  3. 原 jQuery中document的ready和load事件的区别?

    概述: 大家在工作中用jQuery的时候一定会在使用之前这样:   1 2 3 4 5 6 7 8 //document ready $(document).ready(function(){     ...

  4. doment ready事件和load事件的区别及实现

    从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document rea ...

  5. jquery $(document).ready() 与js原生的window.onload的区别总结

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

  6. jquery中data()和js中dataset属性的区别

    INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...

  7. $(document).ready(function(){})和$(window).load(function(){})的区别

    页面加载完成有两种状态: 1.Ready:表示文档结构已经加载完成,不包含图片等非文字媒体文件,在Dom节点创建完成后执行,如果有多个定义则依次执行 $(document).ready(functio ...

  8. JQuery的ready函数与JS的onload的区别详解

    JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...

  9. jquery的$(document).ready()与js的window.onload区别

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...

随机推荐

  1. Activiti6.0教程 28张表解析 (三)

    使用Activit的朋友都知道Activiti对应的有28张表,今天我们就来说下Activit中28张表对应的含义是什么? 如何创建表? 在Activiti中创建表有三种方式,我们依次来看下: 一.通 ...

  2. php 文件锁flock解决并发

    方案一:使用文件锁排它锁 flock函数用于获取文件的锁,这个锁同时只能被一个线程获取到,其它没有获取到锁的线程要么阻塞,要么获取失败 在获取到锁的时候,先查询,如果查询成功则进行操作,然后释放锁 f ...

  3. C++入门知识点总结

    阅读目录 1 C++中的命名空间 C++中使用命名空间来解决在相同文件或范围的同名变量问题,示例程序如下: #include <iostream> using namespace std; ...

  4. _bzoj1010 [HNOI2008]玩具装箱toy【斜率优化dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1010 裸的斜率优化,第一次写队首维护的时候犯了个智障错误,队首维护就是维护队首,我怎么会那队 ...

  5. Bryce1010的微机接口课设

    8086CPU知识回顾 8086 CPU 中寄存器总共为 14 个,且均为 16 位 . 即 AX,BX,CX,DX,SP,BP,SI,DI,IP,FLAG,CS,DS,SS,ES 共 14 个. 而 ...

  6. [转]F# Samples 101 - Visual Studio 2010

    http://code.msdn.microsoft.com/F-Samples-101-0576cb9f/sourcecode?fileId=18956&pathId=1045958806 ...

  7. java自动包装与解包

    关于java的自动包装机制想必大家都用过吧,一般这些机制都用于在往容器中存储基本类型数据的时候,因为容器中不允许存在基本数据类型,所以就会调用自动包装机制,将基本数据类型转换为对象,将基本数据保存在对 ...

  8. mysql之流程控制

    目录 分支结构 循环结构 分支结构: 1.if condition then [statement] elseif condition then [statement] else [statement ...

  9. win7电脑删除文件时一直提示文件正在被另一个程序占用

    这样的情况并非是第一次遇到了,以前总是会觉得这样的问题只是电脑的错乱,重启一下电脑就好了,但是并非每次都需要重启电脑的,其实简单的设置一下,这个问题就可以解决了.对了,咱们还是说说这到底是个什么问题吧 ...

  10. 从单机到2000万 QPS 并发的 Redis 高性能缓存实践之路

    1.引言 知乎存储平台团队基于开源Redis 组件打造的知乎 Redis 平台,经过不断的研发迭代,目前已经形成了一整套完整自动化运维服务体系,提供很多强大的功能.本文作者陈鹏是该系统的负责人,本次文 ...