$(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
随机推荐
- C# — 创建Windows服务进阶版
1.新建一个Windows服务项目:FaceService 2.将service1.cs重命名为FaceService.cs,然后在主界面右击鼠标,选择添加安装程序 3.鼠标选择serviceInst ...
- mysql监控每一条执行的sql语句
查看日志配置是否打开 SHOW VARIABLES LIKE "general_log%"; SET GLOBAL general_log = 'ON'; 打开日志 SET G ...
- Windows 虚拟机 忘记密码的处理
说明 经过验证 没法用这种方式处理 之前的系统够可以 2016的方法 稍后在写一个. 1. 修改虚拟机的配置界面: 2. 增加windows的安装盘 作为启动盘 3 bios 里面设置CD启动 比较简 ...
- Android——具有边框的Textview
我们可以看见很多类似瀑布流的分类: 通过边框进行选择,那么这个边框是怎么变成的呢? 我们可以通过添加背景图,不过有更加简单的,如下: 我们在drawable文件中编写一个shape, <?xml ...
- SpringMVC学习手册(三)------EL和JSTL(上)
1.含义 EL: Expression Language , 表达式语言 JSTL: Java Server Pages Standard Tag Library, JSP标准标签库 ...
- hdu 3037——Saving Beans
Saving Beans Time Limit: 6000/3000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Tota ...
- OTZ%%%子谦。大佬
又上了节课...俩题 计算系数 组合数问题... 要不是大佬指点就只能阶乘暴力算了 (主要还是我忘了杨辉三角) 杨辉三角与组合数C有着千丝万缕的联系,在计算,使用方面相当方便. 先说计算系数 计 ...
- python基础之小数据池、代码块、编码和字节之间换算
一.代码块.if True: print(333) print(666) while 1: a = 1 b = 2 print(a+b) for i in '12324354': print(i) 虽 ...
- 【BZOJ2876】【Noi2012】骑行川藏 拉格朗日乘法
题目描述 给你 \(n,E,s_i,k_i,v_i'\),要求在 \[ \sum_{i=1}^nk_i{(v_i-v_i')}^2s_i\leq E \] 的前提下最小化 \[ \sum_{i=1}^ ...
- CSS概念,引入,选择器
概念 层叠样式表,定义如何显示HTML元素. 使用方式 行内样式 不推荐使用此方式 结构 和 样式的 杂糅会影响后期的维护 <p style="color: red"> ...