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

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. 终于有人把“TCC分布式事务”实现原理讲明白了!

    之前网上看到很多写分布式事务的文章,不过大多都是将分布式事务各种技术方案简单介绍一下.很多朋友看了还是不知道分布式事务到底怎么回事,在项目里到底如何使用. 所以这篇文章,就用大白话+手工绘图,并结合一 ...

  2. docker 搭建 Telegram Messenger MTP

    docker hub官方镜像地址如下: https://hub.docker.com/r/telegrammessenger/proxy 拉取镜像 sudo docker pull telegramm ...

  3. python部署galery集群

    galery.py文件内容 import pexpect import os import configparser HOSTNAME_DB1='db1' HOSTNAME_DB2='db2' HOS ...

  4. ondaHTTPError: HTTP 000 CONNECTION FAILED for url

    可能是网络问题,换网络. 可能是获取库的IP无法链接到,换库的IP,如添加清华镜像IP等.

  5. CGPoint、CGSize、CGRect、CGRectEdge的详细使用

    http://blog.sina.com.cn/s/blog_953e22700101r7lz.html 在CGGeometry.h里的 CGPoint.CGSize.CGRect.CGRectEdg ...

  6. nginx编译文件配置(原)

    1.在根目录的opt下创建文件夹software并wget一个nginx包进行解压,/opt/software/,解压后需要对软件包文件进行授权 2.cd到nginx目录输入id nginx 未安装插 ...

  7. Thymeleaf的超链接与AJAX的跳转问题

    //th:href :超链接<a th:href="@{/list}"></a>//可以在其他页面跳转yt <form id="msform ...

  8. 基于HA机制的Nginx配置实现

    Keepalived是一个基于VRRP协议来实现服务高可用方案.下载地址:http://www.keepalived.org/ keepalived-1.2.24.tar.gz VRRP协议:虚拟路由 ...

  9. Nginx ACCESS阶段 Satisfy 指令

    L:60 这里一定要记住 return 指令所对应的阶段 早与access 因此如果location 有return 的话 那么 deny可能都会失效

  10. 皮尔逊相关系数与余弦相似度(Pearson Correlation Coefficient & Cosine Similarity)

    之前<皮尔逊相关系数(Pearson Correlation Coefficient, Pearson's r)>一文介绍了皮尔逊相关系数.那么,皮尔逊相关系数(Pearson Corre ...