如何判断HTML页面加载完成

加载完成包含两种含义：

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>

如何判断HTML页面加载完成相关推荐

如何在页面加载完成后再去做某事？什么方法可以判断当前页面加载已完成？...
javascript提供了document.readyState=="complete"方法来解决当前页面加载判断的问题.<script type="text/ja ...
Hello Playwright：(8)等待页面加载
在我们前面的文章中,我们始终使用await page.GotoAsync(url);加载页面,我们的目的是等待足够长的时间让页面上的元素出现.但是,我们更希望永远不要因为等待浪费任何时间. WaitU ...
JS判断页面加载完毕
//JS判断页面加载完毕,再隐藏加载效果层,一个简单的JS加载效果.document.onreadystatechange = function () {if (document.readyState ...
页面状态javascript 判断 iframe是否加载成功
这段时间一直在学习页面状态之类的问题,现在正好有机会和大家分享一下. 最近在做产品的维护,修改一些老的bug.有个bug是jsp页面在加载的时候请求一个iframe.在页面显示的过程当中,窗口会长久的 ...
vue 判断页面加载完成_vue项目搭建及总结
一.vue的两种安装方式 (1)直接在html中引入vue.js (2)通过vue+nodeJS搭建我们采用的是第二种方式二.vue和nodeJS的关系 (1)nodeJS不是一个js框架,是一个 ...
vue 判断页面加载完成_Vue实战040：nprogress页面加载进度条
前言很多时候在访问网页的时候我们总是看到页面在加载中,可以却不知道要加载多久,无期限的等待总是让人烦躁不安,所以我们希望能知道网页加载的进度,这样我们就能做到心中有数是否继续等待页面加载.这个功能我 ...
html 判断页面加载完成,Javascript判断页面是否加载完成
很多时候我们在使用document.getElementById的时候直接在script标签中获取对象,然后使用,此时程序会出现该对象为undefined. var dom=document.getE ...
html页面判断其他div为空,将外部html加载到div中 - 页面加载然后变为空白
我确信这将会变成一件愚蠢的事情,但是自从我成为JavaScript noob以来,这里就变成了一件愚蠢的事情.将外部html加载到div中 - 页面加载然后变为空白我想外部HTML内容加载到我的索引 ...
vue 判断页面加载完成_vue之骨架屏踩坑之路
vue的首屏优化方式有很多种骨架屏就是其中之一作为一个前端开发用户体验感是很重要的关于页面的loading状态的展示,目前主流的主要有loading图和进度条两种现今使用骨架屏的也越来越多 ...

如何判断HTML页面加载完成

加载完成包含两种含义：

判断ready的方法:

判断onload的方法:

如何判断HTML页面加载完成相关推荐

最新文章

热门文章