不谈调用次数,加载先后问题,只看渲染时区别

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

随机推荐

  1. 如何使用 IDEA 创建项目并且上传到 GitHub

    在 GitHub中 注册创建账号 :https://github.com 下载安装 Git : https://git-scm.com 安装成功后打开 Git Bash,输入下列命令,设置 Git 全 ...

  2. VLAN模式

    一 二层基础知识 1.1 vlan介绍 本小节重点: vlan的含义 vlan的类型 交换机端口类型 vlan的不足 1.1.1:vlan的含义 局域网LAN的发展是VLAN产生的基础,因而先介绍一下 ...

  3. 即将发布的 ASP.NET Core 2.2 会有哪些新玩意儿?

    今年 6 月份的时候时候 .NET 团队就在 GitHub 公布了 ASP.NET Core 2.2 版本的 Roadmap(文末有链接),而前两天 ASP.NET Core 2.2 预览版 2 已经 ...

  4. 移除Windows图标快捷方式小箭头

    以管理员身份运行cmd,输入 reg delete "HKEY_CLASSES_ROOT\lnkfile" /v IsShortcut /f & taskkill /f / ...

  5. #Leetcode# 997. Find the Town Judge

    https://leetcode.com/problems/find-the-town-judge/ In a town, there are N people labelled from 1 to  ...

  6. jQuery对页面的操作

    一.对元素内容和值进行操作 1.对元素内容操作 [text()]:获取值. [text(val)]:获取并修改值. [html()]:获取值. [html(val)]:获取并修改值,与text的区别在 ...

  7. Android N和O中使用adb shell dpm set-device-owner 'com.android.cts.verifier/com.android.cts.verifier.managedprovisioning.DeviceAdminTestReceiver' setup Device Owner失败

    PC端出现如下log: D:\workspace\AndroidO\CTS\CTS_Verifier>adb shell dpm set-device-owner 'com.android.ct ...

  8. STM32的IO口是如何配置为某个外设使用的 ---?

    @2019-03-01 [猜想] 使用片内外设功能: 首先将对应 IO 口配置为复用输出 其次是 IO 口对应的多个功能外设,哪个外设使能即将外设与 IO 口相连 [疑问] 若多个外设都使能,那么到底 ...

  9. Ubuntu和Windows双系统的安装

    本菜鸡的ACM生涯大概是结束了 最有希望的EC和焦作也顺利的铁了,一路走来还是怪自己不努力,整日整日的划水,算了,铁牌退役,也是自己应有的惩罚,静下心来吧 下面介绍如何装windows10和Ubunt ...

  10. 计算机基础理论知识梳理篇(一):数据类型长度、内存页、IPC

    字长与数据类型长度 字长指CPU在同一时间能够处理二进制数据的位数,是由其外接数据总线(地址总线决定了CPU的寻址空间,如16位微型机的地址总线为20位,其可寻址空间为220 = 1MB)的条数决定的 ...