jQuery 之 onload与ready()

最新推荐文章于 2022-03-18 19:28:17 发布

启之灵

最新推荐文章于 2022-03-18 19:28:17 发布

阅读量671

点赞数

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

本文链接：https://blog.csdn.net/z_x_Qiang/article/details/85727170

版权

jQuery 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window.onload与$(document).ready()</title>
</head>
<body>
<h1>测试window.onload与$(document).ready()</h1>
<img id="logo"
     src="https://gss0.bdstatic.com/5bVWsj_p_tVS5dKfpU_Y_D3/res/r/image/2017-05-19/6fec71d56242b74eb24b4ac80b817eac.png">

<!--
区别: window.onload与 $(document).ready()
  * window.onload
    * 包括页面的图片加载完后才会回调(晚)
    * 只能有一个监听回调
  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(早)
    * 可以有多个监听回调
-->
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script type="text/javascript">
    /*
     需求：
     1. 直接打印img的宽度，观察其值
     2. 在 $(function(){}) 中 打印 img 的宽度
     3. 在 window.onload 中打印宽度
     4. 在 img 加载完成后打印宽度
     */

    // 1. 直接打印img的宽度，观察其值
    console.log('直接', $('#logo').width())

    window.onload = function () {
        console.log('onload', $('#logo').width())
    }
    window.onload = function () {
        console.log('onload2', $('#logo').width())
    }

    $(function () {
        console.log('ready', $('#logo').width())
    })
    $(function () {
        console.log('ready2', $('#logo').width())
    })

    $('#logo').on('load', function () {
        console.log('img load', $(this).width())
    })

    /*$(document).ready(function () {

    })*/

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

启之灵

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jQuery 之 onload与ready()

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;window.onload与$(document).ready()&lt;/title&gt;&lt;/head&gt;&lt;b
复制链接

扫一扫

专栏目录