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

最新推荐文章于 2022-07-17 15:58:57 发布

yungkit

最新推荐文章于 2022-07-17 15:58:57 发布

阅读量728

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： jquery onload ready

本文链接：https://blog.youkuaiyun.com/u011502132/article/details/46232589

jQuery 专栏收录该内容

1 篇文章

订阅专栏

本文详细解析jQuery中的$(document).ready()与window.onload的区别，包括执行时间、编写数量及简化写法，通过实例展示两者执行顺序。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先我们直接看看stackoverflow上的大拿是怎么回答的，回答的比较简单，一看就懂：

The ready event occurs after the HTML document has been loaded, while the onload event occurs later, when all content (e.g. images) also has been loaded.
The onload event is a standard event in the DOM, while the ready event is specific to jQuery. The purpose of the ready event is that it should occur as early as possible after the document has loaded, so that code that adds functionality to the elements in the page doesn’t have to wait for all content to load.

链接为：http://stackoverflow.com/questions/3698200/window-onload-vs-document-ready

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法，不过与window.onload方法还是有区别的。
1.执行时间

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

2.编写个数不同

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

3.简化写法

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

另外再总结一下
$(window).load(function(){});,
以及
function(function(){})(jQuery);



<html>
<head>
<script src="jquery-1.9.1.min.js"></script>
<script>

    (function(){
        alert("在DOM加载前执行");

    })(jQuery);

    window.onload=function(){
        alert("我是第一个window.onload()");
    };

    //只执行最后一个onload
    window.onload=function(){
        alert("我是第二个window.onload()");
    };


    //$(window).load按顺序执行
    $(window).load(function(){
        alert("我是一个$(window).load()");
    });

    $(window).load(function(){
        alert("我是二个$(window).load()");
    });



    $(function(){

        alert("在DOM加载完毕时马上执行");
    });

</script>
</head>
<body>
<p>this is paragraph </p>
</body>
</html>

请大家复制后引入自己已经下载好的jQuery版本，从alert（）方法的输出我们已经可以看出window.onload、 $(document).ready()、$ (window).load以及function(function(){})(jQuery);的执行顺序了。需要注意的是：window.onload与 $(window).load似乎看起来一样，但是window.onload只执行最后一句的绑定事件，而$ (window).load则是按顺序执行每一个绑定的事件。