jquery $(document).ready() 与$(document).load()的区别

最新推荐文章于 2021-11-22 11:30:26 发布
最新推荐文章于 2021-11-22 11:30:26 发布
阅读量719 收藏
点赞数 2
CC 4.0 BY-SA版权
分类专栏： JS 文章标签： jquery dom
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_31561631/article/details/52929134
本文详细解释了DOMContentLoaded与load事件的区别，以及它们在页面加载过程中的作用。文章指出DOMContentLoaded事件在DOM树构建完成后触发，而load事件则在所有资源加载完毕后触发。此外还介绍了$(document).ready()方法的特点。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在讲区别之前，大家可以打开按F11 点开network查看一下，最下面那一行最下面那一行

DOMContentLoaded和Load的事件的区别

1、先触发DOMContentLoaded事件，后触发load事件。
2、前者是加载完Dom树之前的时间，后者是全部都加载完，包括图片，音乐等资源。
3、 load不能同时编写多个，如果有多个load方法，只会执行一个 $(document).ready()可以同时编写多个，并且都可以得到执行

页面加载，整体简单来说，可以分为以下6步：

  1. 解析HTML结构（标签解析）
  2. 加载外部脚本和样式表文件（js,css等）
  3. 解析并执行脚本代码
  4. DOM树构建完成 //DOMContentLoaded
  5. 加载Img,video,music等外部文件
  6. 页面加载ok //load

另外，$(document).ready(function(){}) 可以简写成==>$(function(){})

$(document).ready()与window.onload的区别
No_Name_Cao_Ni_Mei的博客
07-02 513
选择使用还是取决于你的具体需求。如果你只需要确保DOM已经加载完成，并且正在使用jQuery，那么是一个更好的选择。如果你需要等待页面上的所有资源都加载完成，或者不使用jQuery，那么将更加合适。
document load 与document ready的区别
一生为追梦的博客
04-06 6673
页面加载完成有两种事件 1.load是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），执行一个函数 问题：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响 2.$(document).ready()是当DOM文档树加载完成后执行一个函数 （不包含图片，css等）所以会比load较快执行
$(document).ready(function() {});写与不写有什么区别 与$(function() {});区别
guorun18的专栏
11-17 867
$(document).ready 里的代码是在页面内容都加载完才执行的，你直接写到script标签里，当页面加载完这个script标签就会执行里边的代码了，如果你标签里执行的代码调用了当前还没加载过来的代码或者dom，那么就会报错， 当然如果你把script标签当到页面最后面那么就没问题了和ready差不多的效果 $(function() {})是$(document).ready(f
$(document).load(); $(document).ready();的执行顺序
06-06 1万+
$(document).load(); 当web页面以及其附带的资源文件，如CSS，Scripts，图片等，加载完毕后执行此方法。 常用于检测页面（及其附带资源）是否加载完毕。 $(document).ready(); 当页面DOM对象加载完毕，web浏览器能够运行JS时，此方法即被触发。如果你想尽快执行JS，可以使用此方法。[在html的头部的script标签中的，不处于read
jQuery中ready与load事件的区别
每天进步一点
09-16 598
原文地址：http://www.uw3c.com/jsviews/js15.html
jquery $(document).ready()和$.load执行顺序
德州仪器
10-30 2738
$('#test2').load('test2.html'); $(document).ready(function(){ $('#btn').click(function(){ alert('绑定成功'); }); }); 接下来是test2.html test2 这样之后点击test2按钮，但是不会有任何反
jquery $(document).ready() 与[removed]的区别
10-29
但与window.onload不同的是，$(window).load()方法可以与$(document).ready()一起使用，从而允许开发者同时控制页面DOM元素的加载和页面所有资源的加载。 此外，还有一些特殊情况，在所有DOM元素加载之前执行的代码...
jquery中的$(document).ready()使用小结
12-11
$(document).ready(function(){…. })这个函数是用来取代页面中的[removed]; document.ready()和传统的方法<body onload=”load()”> 相似，不同的是onload()的方法是在页面加载完成后才发生，这包括DOM元素和...
JQ中$(window).load和$(document).ready区别与执行顺序
10-20
在JavaScript和jQuery中，`$(document).ready()`和`$(window).load()`是两种常见的事件绑定函数，它们分别用于在不同的页面加载阶段执行相应的代码。理解它们的区别和执行顺序对于优化网页性能和确保脚本正确运行至...
jquery的$(document).ready()和onload的加载顺序
10-29
3. 使用jQuery的`$.holdReady(true)`和`$.holdReady(false)`组合，来控制`$(document).ready`的执行时机。 4. 如果可能，避免在frame中加载页面，或者确保frame内页面的资源都能正确访问。 理解`$(document).ready...
jquery 中的document ready 和document load 的区别
WJ930708的博客
04-17 421
$(document).load(function(){})：是当页面所有资源全部加载完成后（包括DOM文档树，css文件，js文件，图片资源等），再执行一个函数； 短板：如果图片资源较多，加载时间较长，onload后等待执行的函数需要等待较长时间，所以一些效果可能受到影响$(document).ready(function(){})：是$(function(){})的缩写，表示当DOM文档树加载...
【jQuery 基础】$ (document) .ready和$(window).load
羽裳醉月的博客
11-22 621
$ (document) .ready $ (document) .ready(function () { }); $(window).load $(window).load(function () { // なにかしらの処理 }); 执行顺序： ① 页面开始加载 ② html加载完成 ③ $ (document) .ready 执行 ④ 加载包括图像在内的所有内容 ⑤ $ (window) .load 运行 ...
jquery中页面Ajax方法$.load的功能
weixin_34120274的博客
10-17 140
load语法 $(".selector").load("url", function(responseText, statusText, xmlhttprequest)); 可以做到加载一个页面的时候，如果发生错误，根据statusText给出的状态，显示对应的提示，这对用户来说非常重要。 例子,load post 代码如下 复制代码 &lt;div id=btnAjaxPost&gt;...
Ajax的load方法
az6567376的博客
08-27 239
返回值:jQueryload(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > sel...
$(document).ready(function(){...})和$(document).load(function(){...})的区别
sunshine5050的博客
10-22 587
1. 概述大家在敲jQuery代码的时候经常会用到$(document).ready(function(){...})和$(document).load(function(){...})，它们到底有什么区别呢？
jQuery中document的ready和load事件比较
bz19941101的博客
09-07 200
//document ready $(document).ready(function(){ …code… }) //document ready 简写 $(function(){ …code… }) //document load $(document).load(function(){ …code… }) DOM文档加载的步骤： (1) 解...
jQuery AJAX —开篇 $.load()
热门推荐
Akk
01-15 1万+
前言     之前的一篇博客，对Ajax的理解Ajax核心对象 XMLHTTPRequest五步学会使用 ，对Ajax的作用和基本使用有了一些了解。     这里做一个简单总结，AJAX核心对象XMLHTTPRequest和服务器的交互过程： 过程：初始化→发送请求→等待服务器响应→接收响应 　　1.创建XMLHTTPRequest对象 　　2.使
$.load()的用法
weixin_34191734的博客
11-29 2180
jquery load 事件用法 jquery load 事件用法 如果绑定给window对象，则会在所有内容加载后触发，包括窗口，框架，对象和图像。如果绑定在元素上，则当元素的内容加载完毕后触发。 注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件...
JQuery_$(document).ready() 与 $(window).load()方法比较
迎难而上
04-06 8777
$(document).ready()  JQuery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。   执行时间：$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。 也就是不会等到图片，Flash全部加载完成后执行。    $
$(window).load与$(document).ready的区别
05-13
`$(window).load` 和 `$(document).ready` 都是 jQuery 提供的方法，用于在页面加载完成后执行一些 JavaScript 代码。它们的区别在于执行的时机不同。 `$(document).ready` 会在 DOM 加载完成后立即执行，不必等待...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值