首页 > Web开发 > 详细

jQuery之onload与ready

时间:2020-07-11 19:12:59      阅读:48      评论:0      收藏:0      [点我收藏+]

window.onload与$(document).ready()

区别:

  • window.onload

    包括页面的图片加载完后才会回调(晚)。

    只能有一个监听回调。

  • $(document).ready()

    等同于:$(function(){})。

    页面加载完就回调(早)。

    可以有多个监听回调。

示例:

<!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">

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">

    /*
     * 需求:
     * 1.直接打印img的宽度,观察其值
     * 2.在$(function(){})中打印img的宽度
     * 3.在window.onload中打印宽度
     * 4.在img加载完成后打印宽度
     */
    var $logo = $(#logo);
    console.log($logo.width());//0
    $(function () {
        console.log($1(), $logo.width());
    });
    $(function () {
        console.log($2(), $logo.width());
    });
    window.onload = function () {
        console.log(onload1());
    };
    window.onload = function () {
        console.log(onload2(), $logo.width());
    };
    $logo.on(load, function () {
        console.log(load, this.width);
    });
</script>
</body>
</html>

jQuery之onload与ready

原文:https://www.cnblogs.com/hfl1996/p/13284455.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!