如何判断HTML页面加载完成

加载完成包含两种含义:

  1. DOM构建完成,不包含图片、样式和其它框架,也就是我们常说的DOMContentLoaded事件。
  2. 页面依赖的所有资源记载完成,也就是我们常说的window.onload事件。

判断ready的方法:

  1. 监听documentonreadystatechange,判断readyState
 document.onreadystatechange = function () {
    if(document.readyState === 'complete'){
      console.log("On document.onreadystatechange");
    }
 };

或者

 document.addEventListener('readystatechange' , function () {
   if(document.readyState === 'complete'){
        console.log("On document.onreadystatechange");
    }
});

ps: on开头的事件既可以通过domObj.onEventName的形式也可以通过domObj.addEventListener(‘eventName' ,function(){})的形式监听。两者的区别是:onEventName重复添加同一事件,只会触发最后添加的事件。addEventListener添加的事件都会出发,先添加的先触发。

  1. 监听documentready事件
 document.ready = function(){
    console.log('document.ready');
};
  1. 监听documentDOMContentLoaded事件
document.addEventListener('DOMContentLoaded', function () {
   console.log("On DOMContentLoaded -2-");
});

ps:jquery的$(function(){})$(document).ready(function(){})底层都是使用的DOMContentLoaded事件。

执行顺序为:Jquery ready >(早于) document.ready > DOMContentLoaded > readystatechange

判断onload的方法:

  1. 监听windowonload事件
window.onload = function () {
    console.log("On window.onload");
};
  1. 监听document.bodyonload事件
document.body.onload = function () {
   console.log("On document.body.onload");
};

请注意:onload 方式添加会产生覆盖效果(你可以把这两个事件认为是同一个事件),后添加的覆盖先添加的事件。addEventListener方式不会产生覆盖。

下面是完整测试代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>判断页面加载完成</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.0.js"></script>
</head>
<body>

<div>
    <button id="testButton">点我呀</button>
</div>
<script>
    readyEvent();
    onLoadEvent();

    /**
     * 测试事件覆盖
     */
    function initButtonClick() {
        document.getElementById('testButton').onclick = function () {
            console.log('Trigger by onclick -1-');
        };

        document.getElementById('testButton').onclick = function () {
            console.log('Trigger by onclick -2-');
        };

        document.getElementById('testButton').addEventListener('click', function () {
            console.log('Trigger by addEventListener -1-');
        });

        document.getElementById('testButton').addEventListener('click', function () {
            console.log('Trigger by addEventListener -2-');
        });
    }

    /**
     * 判断ready
     */
    function readyEvent() {
        document.onreadystatechange = function () {
            if (document.readyState === 'complete') {
                console.log("On document.onreadystatechange -1-");
            }
        };

        document.onreadystatechange = function () {
            if (document.readyState === 'complete') {
                console.log("On document.onreadystatechange -2-");
            }
        };
        
        document.ready = function(){
            console.log('document.ready');
        };
        document.addEventListener('DOMContentLoaded', function () {
            console.log("On DOMContentLoaded -1-");
        });

        document.addEventListener('DOMContentLoaded', function () {
            console.log("On DOMContentLoaded -2-");

            initButtonClick();
        });


        $(function () {
            console.log('On Jquery Ready -1-');
        });

        $(function () {
            console.log('On Jquery Ready -2-');
        });
    }

    /**
     * 判断loaded
     */
    function onLoadEvent() {

        document.body.onload = function () {
            console.log("On document.body.onload -1-");
        };

        document.body.onload = function () {
            console.log("On document.body.onload -2-");
        };


        window.onload = function () {
            console.log("On window.onload -1-");
        };

        window.onload = function () {
            console.log("On window.onload -2-");
        };

        window.addEventListener('load', function () {
            console.log("On window.addEventListener load -1-");
        });

        window.addEventListener('load', function () {
            console.log("On window.addEventListener load -2-");
        });

    }
</script>
</body>
</html>
  • 1
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值