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

时间：2013-12-24类别：Web前端

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

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

window.onload

当一个文档完全下载到浏览器中时，会触发 window.onload 事件。这意味着页面上的全部元素对 javascript 而言都是可以访问的，这种情况对编写功能性的代码非常有利，因为无需考虑加载的次序。

他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

$(document).ready()

通过 $(document).ready() 注册的事件处理程序，则会在 DOM 完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，缺不意味着所有关联的文件都已经下载完毕。换句话说，当 HTML 下载完成并解析为 DOM 树之后，代码就可以运行。

他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

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

1.执行时间

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

2.编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行一个
$(document).ready()可以同时编写多个，并且都可以得到执行

3.简化写法

window.onload没有简化写法
$(document).ready(function(){})可以简写成$(function(){});

测试例子

HTML 代码复制

  
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>测试JQuery</title>
        <script type="text/javascript">...
        window.onload = function () ...{
            var str = document.getElementById("lbtestJs").innerHTML + "<br />这个是Window.onload方法；";
            document.getElementById("lbtestJs").innerHTML = str;
        };
        $(function () ...{
            $("#lbtestJs").html($("#lbtestJs").html() + "<br /> 这个是JQuery的$(document).ready()；");
        });
    
</script>
</head>
<body>
    <form id="form1" runat="server">
    <li>
    测试JQuery和JavaScript：<br />
    <label id="lbtestJs">sss</label>
    </li>    
    </form>
</body>
</html>

标签：

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

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

猜您喜欢

热门推荐