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

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

主要区别：

（1）执行时机

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

（2）编写个数不同

window.onload不能同时编写多个，如果有多个window.onload方法，只会执行最后一个。

$(document).ready()可以同时编写多个，并且都可以得到执行。

（3）简化写法

window.onload没有简化写法。

$(document).ready(function(){})可以简写成$(function(){});

一般写成：

$(document).ready(function(){
...
});

有些时候，必须要等所有的元素都加载完毕，才可以执行一些方法的时候，在Jquery中可以这样用：

$(window).load(function() {
    $("#btn-upload").click(function(){
     uploadPhotos();
   });
});

（4）性能

<!DOCTYPE html>
<meta charset="utf-8">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <script src="jquery-1.11.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        var startTime = new Date().getTime();
        $(document).ready(function () {
            var readyTime = new Date().getTime() - startTime;
            $("<div>jQuery的ready() : " + readyTime + " ms</div>").appendTo("body");
        })
        $(document).ready(function () {
            var readyTime2 = new Date().getTime() - startTime;
            $("<div>jQuery的ready() 2 : " + readyTime2 + " ms</div>").appendTo("body");
        })
        window.onload = function () {
            var windowOnLoadTime = new Date().getTime() - startTime;
            $("<div>window.onload : " + windowOnLoadTime + " ms</div>").appendTo("body");
        }
        window.onload = function () {
            var windowOnLoadTime2 = new Date().getTime() - startTime;
            $("<div>window.onload 2 : " + windowOnLoadTime2 + " ms</div>").appendTo("body");
        }
    </script>
</head>

<body>
<img src="http://www.google.com.hk/logos/2011/cezanne11-hp.jpg" style="width:200px;height:200px;"/>
</body>

</html>

例子说明了性能问题并验证了前面提到的两个问题:

1.jQuery的ready()方法调用时机比window.onload提前，window.onload要等待页面中的资源(图像)加载完成，而ready()在DOM树建立好之后就调用了。
2.ready()方法调用后，传入的方法是追加的形式，所以两个方法都调用了；而window.onload是赋值的形式，所以后面的方法覆盖了前面的方法。

posted @ 2016-01-13 14:58  掉进书洞里的猫  阅读(331)  评论(0)    收藏  举报