jQuery的ready与js的load事件的区别
摘自: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事件的区别的更多相关文章
- jQuery $(document).ready()和JavaScript window.onload()事件的区别
一. 在网上查了一下,发现$(document).ready()是在DOM树加载完成时触发,而window.onload()则是在整个页面全部加载完成时触发.下面是一些验证. var start=+n ...
- 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(){ ...
- doment ready事件和load事件的区别及实现
从2017年9月至今工作中大部分使用react,前端渲染的一些基础性知识记忆不是很深刻了.面试**公司的时候,碰到"document ready和load的区别,以及document rea ...
- jquery $(document).ready() 与js原生的window.onload的区别总结
Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的. 1.执行时间 ...
- jquery中data()和js中dataset属性的区别
INTRO html的标签属性data-允许用户自定义属性.原生javascript和jquery分别定义了dataset属性和data()方法对标签中的data属性进行操作. 取值: 如我们定义这样 ...
- $(document).ready(function(){})和$(window).load(function(){})的区别
页面加载完成有两种状态: 1.Ready:表示文档结构已经加载完成,不包含图片等非文字媒体文件,在Dom节点创建完成后执行,如果有多个定义则依次执行 $(document).ready(functio ...
- JQuery的ready函数与JS的onload的区别详解
JQuery的ready函数与JS的onload的区别:1.执行时间window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行.$(document).ready()是DOM结构绘制 ...
- jquery的$(document).ready()与js的window.onload区别
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> ...
随机推荐
- bzoj 1797: [Ahoi2009]Mincut 最小割【tarjan+最小割】
先跑一遍最大流,然后对残量网络(即所有没有满流的边)进行tarjan缩点. 能成为最小割的边一定满流:因为最小割不可能割一半的边: 连接s.t所在联通块的满流边一定在最小割里:如果不割掉这条边的话,就 ...
- win7下硬盘安装Windows
win7下硬盘安装Windows: 1.下载 Windows 7 ISO镜像,用虚拟光驱拷贝至非C盘(如d:\win7)2.开机按F8 - 修复系统 - 选择最后一项命令修复 - 在命令框输入 d:\ ...
- 团队作业-项目Alpha版本发布
一. 这个作业属于哪个课程 https://edu.cnblogs.com/campus/xnsy/SoftwareEngineeringClass2 这个作业要求在哪里 https://edu.cn ...
- [ZJOI2011]道馆之战
Description 口袋妖怪(又名神奇宝贝或宠物小精灵)红/蓝/绿宝石中的水系道馆需要经过三个冰地才能到达馆主的面前,冰地中的每一个冰块都只能经过一次.当一个冰地上的所有冰块都被经过之后,到下一个 ...
- _bzoj3224 Tyvj 1728 普通平衡树【Splay】
传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=3224 保存splay模版 一刻不停写了一个小时多一点,幸好一遍过了!(其实带着freopen ...
- 51nod 1874 字符串排序
1874 字符串排序 基准时间限制:1 秒 空间限制:131072 KB 分值: 5 难度:1级算法题 收藏 关注 定义一个字符串的无序度为所有位置后面的字母比该位置的字母小的总数之和.比如&q ...
- ambari-server启动报错500 status code received on GET method for API:/api/v1/stacks/HDP/versions/2.4/recommendations Error message : Server Error解决办法(图文详解)
问题详情 来源是,我在Ambari集群里,安装Hue. 给Ambari集群里安装可视化分析利器工具Hue步骤(图文详解 所遇到的这个问题. 然后,去ambari-server的log日志,查看,如下 ...
- Program received signal SIGILL, Illegal instruction
Program received signal SIGILL, Illegal instruction 这个错误,发现是直接在printf 的%s中直接使用string类型,而没有使用c字符串格式造成 ...
- php5.6.30开启redis扩展
注:5.6版本的php一定要下载phpredis3.0以上的版本,之前自己下载用的2.2.4的redis,安装配置完成后,PHP死活不支持redis的扩展,通过phpinfo打印也压根看不到,重复服务 ...
- SQL——时间戳
mysql 低版本,date.datetime.timestamp 无法精确到毫秒 可以舍弃时间类型字段,用 bigint 来代替,如果用字符串类型代替,还是比较担心排序的时候只是根据第一个字母进行排 ...