jQuery之onload与ready

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>