首页 > web前端开发 > jQuery开发 > jQuery中ready和load的区别
2013
01-30

jQuery中ready和load的区别

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

jQuery中的ready特指“DOM”全部加载完毕,也就是说,只要DOM加载完毕了,这个事件自然被触发了。

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

这里不妨给出一个现成的示例代码(纯Html):

jQuery中ready和load的区别 - 第1张  | 前端开拓者
<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中ready和load的区别 - 第2张  | 前端开拓者

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

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

2)

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

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

顺便提及一句,如果这样进行比较:

jQuery中ready和load的区别 - 第3张  | 前端开拓者
<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>
jQuery中ready和load的区别 - 第4张  | 前端开拓者

运行顺序将是先弹出“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去人为触发这个自定义事件。

最后编辑:
作者:zhoumeng
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!