摘自: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. Douglas-Peucker 轨迹压缩算法

    算法的基本思路是:     对每一条曲线的首末点虚连一条直线,求所有点与直线的距离,并找出最大距离值dmax ,用dmax与限差D相比:     若dmax <D,这条曲线上的中间点全部舍去; ...

  2. bzoj 4585: [Apio2016]烟火表演【左偏树】

    参考:https://blog.csdn.net/wxh010910/article/details/55806735 以下课件,可并堆部分写的左偏树 #include<iostream> ...

  3. win10 SQL Server 配置管理器无法启动

    解决方法: 用管理员方式打开命令行 进入 “C:\Program Files (x86)\Microsoft SQL Server\140\Shared”,(有的是“C:/Program Files/ ...

  4. Android中图片压缩(质量压缩和尺寸压缩)

    关于Android 图片压缩的学习: 自己总结分为质量压缩和像素压缩.质量压缩即:将Bitmap对象保存到对应路径下是所占用的内存减小,但是当你重新读取压缩后的file为Bitmap时,它所占用的内存 ...

  5. jenkins构建maven项目

    使用jenkins构建部署maven项目 因为一开始我们是自定义插件,所以构建项目的时候没有显示maven风格的项目.如果要想使用maven,我们这里必须得安装一下插件,我们在插件管理器中, 可以看到 ...

  6. Poj 1743 Musical Theme (后缀数组+二分)

    题目链接: Poj  1743 Musical Theme 题目描述: 给出一串数字(数字区间在[1,88]),要在这串数字中找出一个主题,满足: 1:主题长度大于等于5. 2:主题在文本串中重复出现 ...

  7. Ubuntu下如何用命令运行deb安装包

    转载自 WindTaiL的博客 如果ubuntu要安装新软件,已有deb安装包(例如:iptux.deb),但是无法登录到桌面环境.那该怎么安装?答案是:使用dpkg命令. dpkg命令常用格式如下: ...

  8. 题解报告:hdu 2709 Sumsets

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2709 Problem Description Farmer John commanded his co ...

  9. 微信小程序组件解读和分析:十二、picker滚动选择器

    picker滚动选择器组件说明: picker: 滚动选择器,现支持三种选择器,通过mode属性来区分, 分别是普通选择器(mode = selector),时间选择器(mode = time),日期 ...

  10. 让TortoiseGit记住帐号密码方法

    我的电脑环境是: Windows7 64x   系统用户名是:steden 所以,我的路径是:C:\Users\steden\ 具体要根据你的系统环境及当前用户名来决定. 在这里,有个文件:.gitc ...