ready与load的区别

本文详细介绍了JQuery中ready与load事件的区别,ready在DOM文档加载完成时触发,而load则在页面所有资源加载完成后触发。通过一个实例展示了这两种事件触发的顺序。

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

JQuery里有ready和load事件

$(document).ready(function() {
    // ...代码...
})
//document ready 简写
$(function() {
    // ...代码...
})
$(document).load(function() {
    // ...代码...
})

他们的主要区别为ready先执行,load后执行。

DOM文档加载的步骤:

(1) 解析HTML结构。
(2) 加载外部脚本和样式表文件。
(3) 解析并执行脚本代码。
(4) 构造HTML DOM模型。//ready
(5) 加载图片等外部文件。
(6) 页面加载完毕。//load

从上面的描述中大家应该已经理解了吧,ready在第(4)步完成之后就执行了,但是load要在第(6)步完成之后才执行。

 

结论:

ready与load的区别就在于资源文件的加载,ready构建了基本的DOM结构,所以对于代码来说应该越快加载越好。在一个高速浏览的时代,没人愿意等待答案。假如一个网站页面加载超过4秒,不好意思,你1/4的用户将面临着流失,所以对于框架来说用户体验是至关重要的,我们应该越早处理DOM越好,我们不需要等到图片资源都加载后才去处理框架的加载,图片资源过多load事件就会迟迟不会触发。

 

一个实例:

document.addEventListener("DOMContentLoaded", function() {
    console.log('DOMContentLoaded回调')
}, false);

window.addEventListener("load", function() {
    console.log('load事件回调')
}, false);


console.log('普通方法一')

//测试加载
$(function(){
    console.log('jquery ready')
})

console.log('普通方法二')

执行的顺序为:

普通方法一
普通方法二
jquery ready
DOMContentLoaded回调
load事件回调

  

  

  

  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值