如何判断HTML页面加载完成

最新推荐文章于 2023-03-10 07:45:10 发布

大神等等我

最新推荐文章于 2023-03-10 07:45:10 发布

阅读量5.3k

点赞数 1

分类专栏： HTML 文章标签： html dom

本文链接：https://blog.csdn.net/qdjoker/article/details/107734006

版权

HTML 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

加载完成包含两种含义：

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

判断ready的方法:

监听document的onreadystatechange,判断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添加的事件都会出发，先添加的先触发。

监听document的ready事件

 document.ready = function(){
    console.log('document.ready');
};

监听document的DOMContentLoaded事件

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

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

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

判断onload的方法:

监听window的onload事件

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

监听document.body的onload事件

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
评论
如何判断HTML页面加载完成

加载完成事件分为两类：ready：完成骨架的加载，也就是通常所说的DOM解析和样式加载完成，，但是不包含图片等非文字媒体文件；onload：彻底加载结束，包含图片等文件在内的所有元素都加载完成；判断ready的方法:监听document的onreadystatechange,判断readyState document.onreadystatechange = function () { if(document.readyState === 'complete'){ co
复制链接

扫一扫