$(window).load(function(){}) 和 $(document).ready(function(){})的区别

Posted 2020-09-21 灵剑丹心

在JavaScript中

window.onload = function(){ 
  alert(“text1”); 
}; 

等同于在jQuery中

$(window).load(function(){
    alert("text1");
});

他们都是用于当页面的所有元素，包括外部引用文件，图片等都加载完毕时运行函数内的alert函数。load方法只能执行一次，如果在js文件里写了多个，只能执行最后一个。（初学者常常在页面结构里对元素直接写行为函数，这样是很丑陋的，可以用选择器等，在js代码里对元素进行行为控制。）

---

在jQuery中

$(document).ready(function(){
    alert("text2");
});

等同于（简化写法）

$(function(){
    alert("text2");
});

他们都是用于当页面的标准DOM元素被解析成DOM树后就执行内部alert函数。这个函数是可以在js文件里多次编写的，对于多人共同编写的js就有很大的优势，因为所有行为函数都会执行到。而且$(document).ready()函数在HMTL结构加载完后就可以执行，不需要等大型文件加载或者不存在的连接等耗时工作完成才执行，效率高。

---

当然 也要根据项目需求来使用，比如有时候有些时候图片或者重要信息没出来，会对用户操作产生误导，或者需要等获取某些图片高宽数据后再执行的行为函数，就得使用window.onload了。