ready与onload的区别

最新推荐文章于 2022-08-25 15:44:10 发布

_洋

最新推荐文章于 2022-08-25 15:44:10 发布

阅读量355

点赞数

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

本文链接：https://blog.csdn.net/mantou_riji/article/details/124546306

版权

jQuery 专栏收录该内容

15 篇文章 1 订阅

订阅专栏

文章目录

两种方法介绍
不同
结论
- 加载时间不同、监听次数不同

两种方法介绍

等待DOM载入完成之后在执行操作的方法有两种
onload：

         window.onload =function(){

         }

ready：

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

简写为：

         $(function (){
            
         })

不同

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ready与onload的区别</title>
</head>
<body>
    <img id="logo" src="https://hbimg.huaban.com/d04baf66dcafffb0fadd5a92b87ad22e66c20e6710b3df-Mt15tL_fw658/format/webp">
   
    <script type='text/javascript' src='./jquery库/jquery-1.12.4.js'></script>
     <script>
// 1．直接打印img的宽度,观察其值
        console.log("直接：",$('#logo').width())       
// 2．在$(function())中打印img的宽度
         $(function  (){
             console.log("ready：",$('#logo').width())   
         })
// 3．在window.onLoad 中打印宽度
          window.onload =function(){
            console.log("onload：",$('#logo').width())       
         }

// 4．在img加载完成后打印宽度
         $('#logo').on('load',function (){
            console.log("img load：",$(this).width())
         })

         

     </script>
    
</body>
</html>

在这里插入图片描述
onload是等待所有数据加载完成之后才执行
img load是等待img数据加载完成之后就执行，所以img load在onload前面。

（注意：可能有缓存影响如果ready和直接不为0可以清空缓存在尝试）

结论

加载时间不同、监听次数不同

window.onload：包括页面的图片加载完后才会回调(晚)
只能有一个监听回调
$(document).ready ()：等同于:$(function(){})，页面（不包含图片）加载完就回调(早)
可以有多个监听回调

_洋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ready与onload的区别

文章目录两种方法介绍不同结论加载时间不同、监听次数不同两种方法介绍等待DOM载入完成之后在执行操作的方法有两种onload： window.onload =function(){ }ready： $(document).ready(function (){ })简写为： $(function (){ })不同eg：<!DOCT
复制链接

扫一扫