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

来源：互联网发布：js清除div内容编辑：程序博客网时间：2024/04/30 04:32

很多同学（包括我）刚接触jQuery时，都搞不清传统的window.onload和jQuery的$(document).ready有什么区别。甚至有人认为这两者其实是一个东西，其实不然。

查询资料，基本都是这么定义的：

window.onload：必须等网页中所有元素都加载完毕才能执行。
$(document).ready：网页中所有DOM结构加载完毕即可执行。

这样的文字读完是不是有种想揍作者的感觉？
对初学者来说，说了跟没说一样，我要懂什么叫DOM结构我还要看你写的资料？

好吧，先把理论放一边，我们来看个例子。

<html><script language=JavaScript src="js/jquery.js" type=text/javascript></script><script>$(document).ready(function(){    alert("$(document).ready() function called!"); });window.onload = function(){    alert("window.onload() called!");}</script><body> <img src="img/jquery_logo.png"></body> </html>

执行结果：

先显示$(document).ready。
这里写图片描述

后显示window.onload。
这里写图片描述

最后显示图片。
这里写图片描述

通过这个例子，起码我们是知道$(document).ready比window.onload执行得更早。

这是因为，$(document).ready只需要加载完<html/></html>、<body></body>、<img></img>这些标签就可以执行了，
而window.onload不单要等这些标签加载完，还需要加载img标签所链接的jquery_logo.png图片。

如果把网页比作人体，DOM结构就是网页的骨架，而图片、视频、音频等是网页的血肉。

骨架创建好，$(document).ready就可以调用。
而血肉创建好，window.onload才可以调用。

这下大家理解了吧，不理解我也没办法了。

0 0