onload与ready对比
onload与ready对比
CS逍遥剑仙
发布于 2025-03-06 09:28:47
发布于 2025-03-06 09:28:47
代码可运行
运行总次数：0
代码可运行
onload与ready对比
Writecsxiaoyao.com By CS逍遥剑仙 我的主页: csxiaoyao.com GitHub: github.com/csxiaoyaojianxian Email: sunjianfeng@csxiaoyao.com
1 window.onload & $(document).ready() & $(window).load()
ready , onload 类函数 : JS的 window.onload 方法， jQuery 的 (document).ready 方法和 (window).load 方法 ready 事件的触发，表示文档结构已经加载完成（不包含图片等非文字媒体文件） onload / load 事件的触发，表示页面包含图片等文件在内的所有元素都加载完成
2 区别
2.1 执行时间
window.onload 在页面的DOM加载完成，所有的图片、子frame等所有元素加载完才触发
window.onload = function () {
alert('window onload event');
};$(document).ready 方法发生在DOM树构造完成（在onload之前发生），不必等图片等资源加载完
$(document).ready(function(){
alert("jquery ready event");
})$(window).load 方法等同于 window.onload
2.2 数量
window.onload 最多一个，若存在多个，后面的覆盖前面的 (document).ready 可有多个，并都可以得到执行(window).load 可有多个，并都可以得到执行
window.onload = function(){
alert('window onload event1');
}
window.onload = function(){
alert('window onload event2');
}
$(document).ready(function(){
alert("jquery ready event1");
})
$(document).ready(function(){
alert("jquery ready event2");
}csxiaoyao.com)结果：
jquery ready event1
jquery ready event2
window onload event22.3 简化写法
window.onload 没有简化写法 (document).ready(function(){}) 可以简写成 (function(){});
3 原生JS实现 jQuery 的 ready 方法
function ready(fn){
if(document.addEventListener){
//标准浏览器
document.addEventListener('DOMContentLoaded',function(){
//注销事件，避免反复触发
document.removeEventListener('DOMContentLoaded',arguments.callee,false);
//执行函数
fn();
},false);
}else if(document.attachEvent){
//IE浏览器
document.attachEvent('onreadystatechange',function(){
if(document.readyState=='complete'){
document.detachEvent('onreadystatechange',arguments.callee);
//执行函数
fn();
}
});
}
}执行
window.onload = function(){
console.log("window.onload event");
}
ready(function(){
console.log('window ready event')
})结果
window ready event
window.onload event本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
