document.ready和onload的区别——JavaScript文档加载完成的那点事儿

最新推荐文章于 2023-12-07 21:59:32 发布

yanchengyc

最新推荐文章于 2023-12-07 21:59:32 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/yc1022/article/details/51082138

js 专栏收录该内容

13 篇文章

订阅专栏

本文详细对比了页面加载事件中的$(document).ready()与window.onload的区别，重点介绍了它们的执行时机及应用场景，同时还提供了多种加载事件的使用示例。

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

页面加载完成有两种事件:

$(document).ready(function(){}) :
表示文档结构已经加载完成（不包含图片等非文字媒体文件）
$(document).ready(function(){})等同于$(function(){})
window.onload:
表示页面包含图片等文件在内的所有元素都加载完成后执行。
```
       可以理解为：ready 在onload 前加载！！！**
```

一般样式控制的，比如图片大小控制放在onload 里面加载;
而：jS事件触发的方法，可以在ready 里面加载;

用jquery的人很多人都是这么开始写脚本的：

$(function(){

// do something

});

其实这个就是jquery ready()的简写，他等价于：

$(document).ready(function(){
//do something
})

或者下面这个方法，jquery的默认参数是：“document”；

$().ready(function(){
//do something
})

             **接触jquery一般最先学到的是何时启动事件。**

对于Body的Onload事件和jquery的Ready方法相比，有很多弊端.比如:
1. 加载多个函数的问题

  <body></body>

在Onload事件中只能这样加载，很丑陋…
而在JQuery中你可以利用多个JQuery.Ready()方法，它们会按次序依次执行
2. 代码和内容不分离
3. 执行先后顺序不同

对于body.onload事件，是在加载完所有页面内容才会触发，我的意思是所有内容,包括图片，flash等.如果页面的这些内容很多会让用户等待很长时间。
而对于document.ready()方法，这个方法只是在页面所有的DOM加载完毕后就会触发,无疑很大的加快了网页的速度.

  <script type="text/javascript">
        $(window).load(function() {
            alert("hello");
        });
        $(window).load(function() {
            alert("hello again");
        });
    </script>
    ```
  上面的代码会在页面所有内容加载完成后按先后顺序依次执行。

  当然不要忘了与之对应的Unload方法
  ```js
$(window).unload(function() {
            alert("good bye");
        });
  ```
上面代码会在页面关闭时引发。

在所有DOM加载之前引发JS代码，这个方法是我在调试的时候最喜欢的，有时候开发的时候也用这种方法
```js
<body>
    <script type="text/javascript">
        (function() {
            alert("hi");
        })(jQuery)
    </script>
</body>




<div class="se-preview-section-delimiter"></div>

对，就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：
“`

this is the content

<script type="text/javascript">
    alert($("#test").html());//I Can display the content

</script>

对， 就是利用js闭包的形式将js代码嵌入body，这段代码会自动执行，当然也可以直接嵌入js代码,这种方式要注意顺序问题，如下：
```js
<body>
<div id="test">this is the content</div>
    <script type="text/javascript">
        alert($("#test").html());//正确写法，能显示内容

    </script>
</body>
<body>
   <script type="text/javascript">
        alert($("#test").html());//这样写错误，不能显示内容

    </script>
    <div id="test">this is the content</div>
</body>