关于ready和load方法作用于不同情况下的比较

jQuery中有两个方法——ready和load。它们非常容易混淆。这里做一下区分：

jQuery中的ready特指“DOM”全部加载完毕，也就是说，只要DOM加载完毕了，这个事件自然被触发了。所谓“DOM”加载完毕指整个页面的标签部分全部加载完毕，至于说某些标签内部可能还存在着一系列事件未完成（譬如img标签可能加载远处一个很大的bmp图片尚未加载完毕等情况）则被忽略。因此对于单纯设置某些Html标签的事件或者属性的绑定而言，在ready方法中显然比load更为适合（因为load必须等到全部的标签都处于完成状态，包括img把图片全部加载完毕为止）。

这里不妨给出一个现成的示例代码（纯Html）：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Scripts/jquery-1.8.3.js"></script>    <script>        $(function () {            alert("DOM加载完毕");        });            </script></head><body onload="alert('Body加载完毕');">    <form id="form1" runat="server">    <div>   <img src="http://lbvagrant.com/images/desktops/a-m/Bliss.bmp" />    </div>    </form></body></html>

注意jQuery中的$(function……)就是静止等待知道整个DOM加载完毕之后触发事件。其等同于：
1）

$.ready(function () {            alert("DOM加载完毕");        });

2）

$(document).ready(function () {            alert("DOM加载完毕");        });

如果你运行这个页面（直接在IE或者其它页面中打开），你会发觉先弹出“DOM加载完毕”的消息框，然后可能直到BMP图片加载完毕之后才会弹出“Body”加载完毕的消息。这就是它们之间最大的差别。

顺便提及一句，如果这样进行比较：

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>    <script src="Scripts/jquery-1.8.3.js"></script>    <script>        $(function () {            alert("DOM加载完毕");        });        $(window).ready(function ()        {            alert("Window加载完毕");        });            </script></head><body onload="alert('Body加载完毕');">    <form id="form1" runat="server">    <div>     <img src=……/>    </div>    </form></body></html>

运行顺序将是先弹出“DOM加载完毕”，之后才弹出“Window加载完毕”，最后弹出“Body加载完毕”。那是因为DOM的本质是document，是Window的一个属性对象。自然等到DOM加载完毕之后Window对象才表示初步构建完毕（window对象自身没有顶层对象了，其本身就是顶层对象）。而DOM初步加载完毕并不表示每一个元素都加载完毕，因此body中的那个js对话框是在最后才弹出。

关于深入理解DOM，你可以使用IE7以及以上的浏览器，或者FireFox等带有代码调试功能的浏览器；以IE为例——

随意打开一个Url（譬如“www.baidu.com”）。先按F12启用调试功能，切换到“网络”面板，点击“开始捕获“按钮，切换到“HTML”面板，随后在地址栏输入百度地址，回车。

如果你注意HTML，它会生成一个Html的TreeView，这个就是DOM（也就是document.ready）需要执行的内容，因此如果你要对一些Html标签进行设置属性等，直接可以在这个事件中去做，而不是等到document全部加在完毕了才去做；相反地，body的onload标签要到body中全部内容彻底加载完毕为止（证明就是你可以看“网络”，里边发现大量Image下载以及内部跳转等复杂信息）。

另外值得注意的是：

$(document).load是错误的，因为“load”并不是document对象的一个内置的方法；如果要人为为某个标签对象增加一个自定义事件，在jQuery中你只能使用bind方法增加一个自定义的事件，然后必须使用trigger去人为触发这个自定义事件。

分类: javascript和jQuery

标签: Load, ready, document

绿色通道：好文要顶关注我收藏该文与我联系

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。