$(document).ready()和window.onload的区别

2021-01-27 15:15

阅读：781

标签：load mamicode 代码量图片 ons info 网页运行 ash

$(document).ready()和window.onload都是文档就绪的方法,当页面加载后执行参数中的函数。

前者为jQuery方法，后者为JavaScript方法。它们之间一共有三种区别：

区别1：简写和不可简写

jQuery中$(document).ready()可以简写为$()。

//$(document).ready() 可以缩写为$()
$(function(){
    alert("111");
})

原生js中window.onload不可简写。

//无法缩写
window.onload = function(){
    alert("111");
}

在jQuery中 .ready()方法可以写多个。

$(function(){
    console.log("语句1");
})
            $(function(){
    console.log("语句2");
})

在控制台输出语句。两个都输出。

window.onload只能写一个。

window.onload = function(){
    console.log("语句1");    //被覆盖了 只输出了语句2
};
window.onload = function(){
    console.log("语句2");
};

代码自上而下运行只输出了一条

技术图片

.ready()方法是网页中所有DOM文档结构回执完毕后即刻执行，可能与DOM元素关联的内容（图片，flash，视频等）并没有加载完就执行。

window.onload是必须等待网页中所有内容加载完毕后(包括图片，flash，视屏等才能执行)。

下面这个比较好像不是很严谨无法用代码量来做区别只能在它们之间做一下对比

window.onload = function(){
    alert("页面所有元素加载完成");
}
$(function(){
    alert("页面DOM结构加载完成");   
})

jQuery的.ready()方法先出来，更早执行提前把界面的效果实现

技术图片

window.onload的方法后弹出

技术图片

以上就是JavaScript和jQuery就绪方法的区别

如有错误请指正:D

$(document).ready()和window.onload的区别

标签：load mamicode 代码量图片 ons info 网页运行 ash

原文地址：https://www.cnblogs.com/449house/p/11925549.html

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：$(document).ready()和window.onload的区别
文章链接：http://soscw.com/index.php/essay/47813.html

亲，登录后才可以留言！