$(document).ready()和onload() html渲染时的区别
不谈调用次数,加载先后问题,只看渲染时区别
1、都在数据绑定完加载。
2、ready可以有多个,且都执行,onload虽可以写多个,但是只执行最后一个。
3、 $.ready = function () {} 和 $(document).ready()不同, $.ready类似于onload,多个的话只会执行最后一个,并且和$(document).ready()同是写的话会覆盖$(document).ready();但是和$(document).ready()类似的是,等dom元素绘制完就执行,不必等所有元素(图片)加载完。
<!DOCTYPE html>
<html>
<head>
<title>ready 和 onload()的区别</title>
</head>
<body>
<p>论一个人的心胸</p>
<img src="http://pic1.win4000.com/wallpaper/e/526c9f87129d9.jpg" />
<img src="http://fj2.eastday.com/hdqxb2013/20130823_7/node757990/images/02347082.jpg" />
<img src="http://pic25.nipic.com/20121210/7447430_215152474000_2.jpg" />
<img src="http://www.ftourusa.com/uploads/allimg/120709/10-120F91156331I.jpg" />
<img src="http://pic1.win4000.com/wallpaper/a/5822ec48466e9.jpg" />
<img src="http://pic1.win4000.com/wallpaper/a/5822ec4e20a0d.jpg" />
<img src="http://www.sinaimg.cn/dy/slidenews/4_img/2010_12/703_34324_811130.jpg" />
<img src="http://www.cecet.cn/upimg/allimg/100727/1124SUQ4.jpg" />
<img src="http://img1.cache.netease.com/catchpic/9/95/959D16A04C3C267B26A0032091AA7F70.jpg" />
<img src="http://www.meijialx.com/images/122547_media_20071310386.jpg" />
<img src="http://img15.3lian.com/2015/h1/21/d/28.jpg" />
<img src="http://img1.3lian.com/2015/a1/147/d/7.jpg" />
<img src="http://img.tuku.cn/file_thumb/201601/m2016012815305053.jpg" />
<img src="http://pic25.nipic.com/20121210/7447430_215152474000_2.jpg" />
<img src="http://www.ftourusa.com/uploads/allimg/120709/10-120F91156331I.jpg" />
<img src="http://pic1.win4000.com/wallpaper/a/5822ec48466e9.jpg" />
<img src="http://pic1.win4000.com/wallpaper/a/5822ec4e20a0d.jpg" />
<img src="http://www.sinaimg.cn/dy/slidenews/4_img/2010_12/703_34324_811130.jpg" />
<img src="http://www.cecet.cn/upimg/allimg/100727/1124SUQ4.jpg" />
<img src="http://img1.cache.netease.com/catchpic/9/95/959D16A04C3C267B26A0032091AA7F70.jpg" />
<img src="http://www.meijialx.com/images/122547_media_20071310386.jpg" />
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript">
window.onload = function () {
alert("我说onload函数");
}
$(document).ready(function () {
alert("第一次document.ready");
})
$(document).ready(function () {
alert("第二次document.ready");
})
$.ready = function () {
alert("第三次加载ready函数"); }
$.ready = function () {
alert("第四次加载ready函数"); }
window.onload = function () {
alert("我是第二次加载onload函数");
}
</script>
</body>
</html>
简单示例
自己使用时碰到的区别就这些,其他的大差不差,可以自己再搜下确认。
加载先后顺序:
document.ready方法在DOM树加载完成后就会执行,而window.onload是在页面资源(比如图片和媒体资源,它们的加载速度远慢于DOM的加载速度)加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。
参考:https://baijiahao.baidu.com/s?id=1613225567743061589&wfr=spider&for=pc
随机推荐
- openflow流表分析(草稿)
OVS bridge 有两种模式:“normal” 和 “flow”.“normal” 模式的 bridge 同普通的 Linux 桥,而 “flow” 模式的 bridge 是根据其流表(flow ...
- Golang 入门系列(二)学习Go语言需要注意的坑
上一章节我们已经了解了 Go 环境的配置,不了解的,请查看前面的文章 https://www.cnblogs.com/zhangweizhong/p/9459945.html,本章节我们将学习 Go ...
- Kaggle教程——大神教你上分
本文记录笔者在观看Coursera上国立经济大学HLE的课程 How to win a data science competetion中的收获,和大家分享.课程的这门课的讲授人是Kaggle的大牛, ...
- AOP从静态代理到动态代理 Emit实现
[前言] AOP为Aspect Oriented Programming的缩写,意思是面向切面编程的技术. 何为切面? 一个和业务没有任何耦合相关的代码段,诸如:调用日志,发送邮件,甚至路由分发.一切 ...
- 【Swift 4.2】uuid 取 hashCode(与 Java/Go/Kotlin 一致)
extension String { func hashCode() -> Int32 { let components = self.split(separator: "-" ...
- 04-JavaScript之常见运算符
JavaScript之常见运算符 1.赋值运算符 以var x=12,y=5来演示示例 运算符 例子 等同于 运算结果 = x=y x=5 += x+=y x=x+y x=17 -= x-=y x ...
- 软件工程(FZU2015) 赛季得分榜,第八回合
SE_FZU目录:1 2 3 4 5 6 7 8 9 10 11 12 13 积分规则 积分制: 作业为10分制,练习为3分制:alpha30分: 团队项目分=团队得分+个人贡献分 个人贡献分: 个人 ...
- Shell命令-文件及目录操作之mkdir、mv
文件及目录操作 - mkdir.mv 1.mkdir:创建目录 mkdir命令的功能说明 mkdir命令用于创建目录,默认情况下,要创建的目录已存在,会提示文件存在,不会继续创建目录. mkdir命令 ...
- iOS发布证书申请
一. 准备工作1.1.准备打包服务器 打包服务器搭建详见http://bbs.justep.com/thread-67724-1-1.html 或 http://www.cnblogs.com/Wo ...
- java垃圾回收GC
垃圾回收时,暂停虚拟机运行 基础假设:大部分对象只存在很短的时间 对于新生代,Minor GC经常会发生 Major/Full GC会对老生代做GC 老生代GC采用Compact算法,移动形成完整的空 ...