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

布满荆棘的人生 2022-06-13 02:37 197阅读 0赞

> 参考资料：  
> [http://blog.csdn.net/lcc921528642/article/details/48379431][http_blog.csdn.net_lcc921528642_article_details_48379431]  
> [http://www.cnblogs.com/jiajia123/p/6107748.html][http_www.cnblogs.com_jiajia123_p_6107748.html]  
> [http://www.cnblogs.com/Chen-XiaoJun/articles/5829876.html][http_www.cnblogs.com_Chen-XiaoJun_articles_5829876.html]

说实话，一直还没完全清楚以下几个 JS 区别：  
`$(window).load()` 与 `$(document).ready()` 以及`$(document).ready()` 与 `window.onload` 。  
刚网上搜了下资料，先整理下。

1、执行时间上的区别：  
window.onload 必须等到页面内（包括图片的）所有元素加载到浏览器中后才能执行。而 $(document).ready(function()\{\}) 是DOM结构加载完毕后就会执行。

2、编写个数不同：  
window.onload 不能同时写多个，如果有多个window.onload，则只有最后一个会执行，它会把前面的都覆盖掉。$(document).ready(function()\{\}) 则不同，它可以编写多个，并且每一个都会执行。

3、简写方法：  
window.onload 没有简写的方法，`$(document).ready(function(){})` 可以简写为 `$(function(){})`。

另外：由于在 $(document).ready() 方法内注册的事件，只要DOM就绪就会被执行，因此可能此时元素的关联文件未下载完，例如与图片有关的HTML下载完毕，并且已经解析为DOM树了，但很有可能图片还未加载完毕，所以例如图片的高度和宽度这样的属性此时不一定有效。

要解决这个问题，可以使用JQuery中另一个关于页面加载的方法 — load() 方法。load() 方法会在元素的onload事件中绑定一个处理函数。如果处理函数绑定在元素上，则会在元素的内容加载完毕后触发。如：$(window).load(function()\{\})=====window.onload = function()\{\}…

详细内容见：  
[http://www.php100.com/html/program/jquery/2013/0905/5954.html][http_www.php100.com_html_program_jquery_2013_0905_5954.html]

--------------------

# 总结来说 #

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了。

[http_blog.csdn.net_lcc921528642_article_details_48379431]: http://blog.csdn.net/lcc921528642/article/details/48379431
[http_www.cnblogs.com_jiajia123_p_6107748.html]: http://www.cnblogs.com/jiajia123/p/6107748.html
[http_www.cnblogs.com_Chen-XiaoJun_articles_5829876.html]: http://www.cnblogs.com/Chen-XiaoJun/articles/5829876.html
[http_www.php100.com_html_program_jquery_2013_0905_5954.html]: http://www.php100.com/html/program/jquery/2013/0905/5954.html