jQuery中$(document).ready与Javascript中window.onload区别_4、jquery中文档就绪函数$(document).ready()与 javascript中 wi-程序员宅基地
技术标签： Javascript
JQuery中$(document).ready与Javascript中window.onload道理有什么区别呢？网上的说法很多，但是发现使用不同版本jquery，效果有完全不一样，很难去回答一下问题，我觉得有必要总结一下
1.window.onload到底是什么时候触发？
2.jQuery中ready到底是什么时候触发？
3.不同版本jQuery中$(document).ready的实现不同？
4. jQuery的ready，在什么时候触发？
5. jQuery的document ready比window.onload提前执行吗？
一、关于onload 事件
onload 事件会在页面或图像加载完成后立即发生。具体可以参考w3c
支持该事件的 HTML 标签：
body, frame, frameset, iframe, img, link, script
如我们可以让图片加载后，执行某个函数，代码如下：
|
1
2
3
|
document.getElementById(
'myimg'
).onload =
function
() {
console.log(
'By javascript img load'
);
};
|
支持该事件的 JavaScript 对象：
image, layer, window
二、window.onload到底是什么时候触发
window.onload,在文档装载完成后会触发，此时，在文档中的所有对象都在DOM中，所有图片，脚本，链接以及子框都完成了装载。可以参考MDN解释
三jQuery中ready到底是什么时候触发
JQuery中ready，即$(function(){})和$(document).ready(function(){}),主要是借助onreadystatechange和DOMContentLoaded来实现的。
在html标准中，对document的readyState。
Returns "loading" while the Document is loading, "interactive" once it is finished parsing but still loading sub-resources, and "complete" once it has loaded.
The readystatechange event fires on the Document object when this value changes.
即document有loading、interactive、complete三种状态，状态变化，就会触发onreadystatechange。当document文档正在加载时,返回"loading"，即默认情况下。当文档结束渲染但在加载内嵌资源时，返回"interactive"，并引发DOMContentLoaded事件。当文档加载完成时,返回"complete"，并引发load事件。如下图：
所以，我们可以通过DOMContentLoaded模拟document的ready事件，如下：
|
1
2
3
|
document.addEventListener(
'DOMContentLoaded'
,
function
() {
//开始调用load事件
});
|
考虑到兼容性，具体可以参考这里，我们还需要使用onreadystatechange进行模拟
|
1
2
3
4
5
6
7
|
document.onreadystatechange =
function
() {
if
(document.readyState ==
"interactive"
) {
//开始调用load事件
}
else
if
(document.readyState ==
"complete"
) {
//开始调用onload事件
}
}
|
四、jQuery中是如何实现ready方法的呢？
下面是JQuery官方对ready函数的描述
ready( handler )
handler
Type: Function()
A function to execute after the DOM is ready.
但是自JQuery3.0开始，这个函数执行过程，已经发生了相应的变化。
|
1
2
3
4
5
6
|
$(document).ready(
function
() {
console.log(
'ready'
);
})
window.onload =
function
() {
console.log(
'load'
);
}
|
经测试，上面代码，有的时候，在jquery3.0之前版本执行的结果和JQuery3.0及之后的版本执行的结果正好先发。所以有必要做一下的分析
通过对比源码，发现，触发ready执行的条件，在jquery2.2.4和3.2.0中是一致的，如下：
|
1
2
3
4
5
6
7
8
9
10
|
if
( document.readyState ===
"complete"
||
( document.readyState !==
"loading"
&& !document.documentElement.doScroll ) ) {
// Handle it asynchronously to allow scripts the opportunity to delay ready
window.setTimeout( jQuery.ready );
}
else
{
// Use the handy event callback
document.addEventListener(
"DOMContentLoaded"
, completed );
// A fallback to window.onload, that will always work
window.addEventListener(
"load"
, completed );
}
|
那只能说明，在执行ready绑定的事件时候，jquery2.2.4和3.2.0有一定的差异。在jquery2.2.4中，ready比window.onload提前执行；在jQuery3.0及以后的版本中，若存在缓存，或是在document.readyState等于"interactive"之后，没有资源需要进一步加载的时候，window.onload比ready提前执行，否则ready先执行。
如有不对的地方，请多指定，更多信息，文章来自这里
智能推荐
invalid header field value "oci runtime error: container_linux.go:247_go invalid header field value-程序员宅基地
文章浏览阅读2w次。[root@localhost ~]# docker run -it alpine:3.2 /bin/bash/usr/bin/docker-current: Error response from daemon: invalid header field value "oci runtime error: container_linux.go:247: starting container process caused \"exec: \\\"/bin/bash\\\": stat /bin/bash:_go invalid header field value
基于多种CNN模型在清华新闻语料分类效果上的对比-程序员宅基地
文章浏览阅读1.1k次，点赞18次，收藏25次。基于多种CNN模型在清华新闻语料分类效果上的对比
ns-3.30.1 Ubuntu 16.04虚拟机安装&使用_nss_3.30-程序员宅基地
文章浏览阅读2.6k次。目录0.开发环境1.安装依赖环境遇到的问题2.下载NS3源码3.配置&安装4.测试4.1 ns3功能测试4.2 程序测试4.3可视化工具Pyviz测试5.NetAnim(可视化工具)5.1安装5.2 NetAnim运行5.3xml文件生成0.开发环境系统:Ubuntu 16.04 (运行在VMware 15 Pro上) ns3..._nss_3.30
Linux基础学习-程序员宅基地
文章浏览阅读397次。 Linux启动过程综述 内容： 一. Bootloader 二.Kernel引导入口 三.核心数据结构初始化--内核引导第一部分 四.外设初始化--内核引导第二部分 五.init进程和inittab引导指令 六.rc启动脚本 七.getty和login 八.bash 附：XDM方式登录 作者:杨沙洲 本文以Redhat 6.0 Linux 2.2.19 for Alpha
＜RTL设计的艺术＞ 预读FIFO假空问题分析与整理-程序员宅基地
文章浏览阅读1.6k次，点赞6次，收藏10次。目录一、问题背景二、提前预知结论三、sram读写时序四、sfifo的结构与逻辑五、非预读fifo的写入与读出六、预读fifo的读出过程七、结论的推出八、改进方案九、主要代码十、最终效果一、问题背景我曾经设计过一个bug，经过一周的分析、总结、复盘，整理成这边文章同大家分享。二、提前预知结论1、sfifo（同步fifo）empty为1不一定空，水线大于0不一定可读；2、解决上述问题需要在fifo内增加1级或者2级寄存器存储数据；三、sram读_预读fifo
C# Encoding 类编码转换还要学习吗？-程序员宅基地
文章浏览阅读469次。C#中Encoding类，它的作用是将字符串从一种编码转换为另一种编码，我们在对Txt文件的一些读取或者是在一些控件的文本读取，数据库的读取，都会用到Encoding类，这个类在C#中我也是第一次学，之前在Java是有接触的，我们今天一起学习一下关于这个类知识，创作不易_c# encoding
随便推点
PHP邮件注入攻击技术-程序员宅基地
文章浏览阅读92次。1. 简介如 今,互联网的使用急剧上升,但绝大多数互联网用户没有安全知识背景。大多数的人都会使用互联网通过邮件Email的方式和他人进行通信。出于这个原因,大 多数网站允许他们的用户联系他们，向网站提供建议,报告一个问题,或者要求反馈,用户将会发送反馈给网站管理员的电子邮件。不幸的是,大多数web开发人员对安全编码Code-Security没有足够的认识,其中的一些程序猿..._php邮件函数crlf注入 漏洞
【附源码】Java计算机毕业设计网上花店系统（程序+LW+部署）_网上花店系统的模块-程序员宅基地
文章浏览阅读676次。项目运行环境配置：Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX（Webstorm也行）+ Eclispe（IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持）。项目技术：java+ mybatis + Maven等等组成，B/S模式 + Maven管理等等。环境需要1.运行环境：最好是java jdk 1.8，我们在这个平台上运行的。其他版本理论上也可以。2.IDE环境：IDEA，Eclipse,Myeclipse都可以。推荐IDEA。_网上花店系统的模块
C# Winform 局部放大功能，鼠标位置捕捉源代码 底层API、源码特点_winform怎么放大缩小graphics画布-程序员宅基地
文章浏览阅读477次，点赞5次，收藏11次。通过本文的介绍，我们了解到了C# Winform中实现局部放大功能的方法。实现这个功能需要运用到GDI+绘图技术，GDI+是Windows操作系统中的一个API，提供了丰富的绘图功能。本文将分享一个简单的局部放大功能的源码，并介绍其底层API以及源码特点，适合初学者学习使用。通过捕捉鼠标的位置，我们可以确定放大的中心点，并根据缩放倍数对周围的区域进行放大。以上是局部放大功能的源码示例，仅包含了最基本的功能实现。一款非常简单的局部放大功能源码，鼠标动态定位功能、GDI+绘图技术，适合初学者学习使用。_winform怎么放大缩小graphics画布
VUE3中h()函数和createVNode()函数的使用-程序员宅基地
文章浏览阅读3.3w次，点赞7次，收藏27次。使用方法：h(标签, {属性},内容)h(标签, {属性},[可以继续嵌套h()])createVNode(标签, {属性},内容)createVNode(标签, {属性},[可以继续嵌套createVNode()])其实h()函数和createVNode()函数都是创建dom节点，他们的作用是一样的，直接上代码：import { createApp } from "vue";//import App from "./App.vue";import { defineComponent, h_createvnode
Android NDK开发轻松入门-程序员宅基地
文章浏览阅读596次。简介:AndroidNDK是能使Android应用开发者把从c/c++编译而来的本地代码嵌入到应用包中的一系列工具的组合。注意:AndroidNDK只能用于Android1.5及以上版本中。I. Android NDK目标:Android虚拟机允许你的应用在源码中通过JNI调用本地代码(c/c++)中实现的方法们。概括起来，这表示：－－你的应用的
ElasticSearch 7.6.2 索引填加字段并设置默认值_elasticsearch 索引增加字段默认值-程序员宅基地
文章浏览阅读4.2k次。ElasticSearch 7.6.2 索引填加字段并设置默认值因为 es 索引结构特性当我们对现有索引新增字段时并不会影响历史数据，并且如果没有写入这个字段值时，也不会有默认值所以有时我们需要对历史数据设置默认值1. 使用 put 方法加字段PUT my_index/_mapping{ "properties": { "字段":{ "type": "类型" } }}2. 设置默认值使用 postPOST my_index/_update_by_quer_elasticsearch 索引增加字段默认值