《锋利的JQuery》翻开没看几页,就遇到了这个神奇的问题,之前在橙旭园学习的时候,JQuery只教了一些基础的,像链式操作等,那时以为这个和window.onload()差不多一模一样,现在才发现差的蛮多的,来整理下:
0:$(document).ready 等价于 $(function(){}
1:$(document).ready可以有多个,而window.onload()只有一个,后面的会覆盖前面的。
<script>
$(document).ready(
console.log("$1")
);
$(document).ready(
console.log("$2")
)
window.onload = function(){
console.log("win1");
}
window.onload = function(){
console.log("win2");
}
window.onload = fucntion(){
func1();
func2();
}//可以用这种方式来添加多个就绪事件
</script>
实现结果:
2:$(document).ready:是DOM结构绘制完毕后就执行,不必等到加载完毕。 意思就是DOM树加载完毕,就执行,不必等到页面中图片或其他外部文件都加载完毕。例如有一张图片,DOM结构已经为它预留好位置了,但还在加载,这个时候就能够给它绑定方法了
window.onload:是页面所有元素都加载完毕,包括图片啊表格等所有元素,如果页面太大,或者用户带宽过小,就可能会出现无响应情况
这一点就使得$(document).ready比window.onload运行得更早一些
举例:
可以看到,在$(document).ready中pic的alt属性还未定义
(前面一个才是$(document).ready,从这里也可以再次发现它比window.onload执行的早噢)
以下为前端大佬们的补充
3.要解决例2中的问题,可以使用Jquery 中另一个关于页面加载的方法 ---load() 方法。 Load() 方法会在元素的 onload 事件中绑定一个处理函数。如果处理函数绑定给 window 对象,则会在所有内容 ( 包括窗口、框架、对象和图像等 ) 加载完毕后触发,如果处理函数绑定在元素上,则会在元素的内容加载完毕后触发。(来源https://www.cnblogs.com/fengchaoran/p/7493803.html)
$(window).load(function(){})
window.onload = function(){}
//这两个是一样的
注意:不要不要在$(document).ready()里绑定load事件
只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件,因为jQuery会在所有DOM加载完成后再绑定load事件。
根据不同的浏览器(Firefox 和 IE),如果图像已被缓存,则也许不会触发 load 事件。
4..在原生JS中,监听DOM执行的事件为DOMContentLoaded,不过此方法只能通过 DOM2 级方式添加,即采用addEventListener()/attachEvent() 方式添加才能够使用。(来自https://blog.csdn.net/lwx931449660/article/details/86096415)
随机推荐
-
Minor【 PHP框架】5.事件
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
-
解迷宫的C++的未完善编程代码........请大神们帮忙改善下.........
这...................................................................... 我也是醉了 看不太懂,大神们求解............ ...
-
Linq Like
Like的操作,有点像in,但是,方向变了.什么意思呢.就是你给定一个字符串,去寻找数据中某个字段包含这个字符串.就是给定的字符串是某字段的子集.Sql Script是这么写的. Selec * fr ...
-
Swift2.1 语法指南——自动引用计数
原档: https://developer.apple.com/library/prerelease/ios/documentation/Swift/Conceptual/Swift_Programm ...
-
提高mysql插入性能
参考地址:http://blog.jobbole.com/29432/ 参数优化: 1. SQL语句是有长度限制,在进行数据合并在同一SQL中务必不能超过SQL长度限制,通过max_allowed_p ...
-
Kafka - 消费接口分析
1.概述 在 Kafka 中,官方对外提供了两种消费 API,一种是高等级消费 API,另一种是低等级的消费 API.在 <高级消费 API>一文中,介绍了其高级消费的 API 实现.今天 ...
-
一些css小用法总结(持续更新~)
1.用:before和:after实现小尖角效果 <div class="div"></div> .div{ background: #fff; borde ...
-
T-SQL 查询语句总结
我们使用一下两张表作为范例: select * from [dbo].[employee] select * from [dbo].[dept] 1.select语句 DISTINCT:去掉记录中的重 ...
-
PHP defined() 函数
定义和用法 defined() 函数检查某常量是否存在. 若常量存在,则返回 true,否则返回 false. 语法 defined(name) 参数 描述 name 必需.规定要检查的常量的名称. ...
-
基于微服务API级权限的技术架构
一般而言,企业内部一套成熟的权限系统,都是基于角色(Role)的 访问控制方法(RBAC – Role Based Access Control),即权限 (Permission)与角色相关联,用户( ...