JS网页加载状态判断

网页加载状态一共分为5种,分别是:

//（未初始化）还没有调用send()方法
1.uninitialized：(Uninitialized) the send( ) method has not yet been invoked. //（载入）已调用send()方法，正在发送请求
2.loading：(Loading) the send( ) method has been invoked, request in progress. //（载入完成）send()方法执行完成，已经接收到全部响应内容
3.loaded：(Loaded) the send( ) method has completed, entire response received. //（交互）正在解析响应内容
4.interactive：(Interactive) the response is being parsed. //（完成）响应内容解析完成，可以在客户端调用了
5.completed：(Completed) the response has been parsed, is ready for harvesting.

1.html文件内的js代码判断

用document.onreadystatechange的方法来监听状态改变,然后用document.readyState == “complete”判断是否加载完成
代码如下:

//当页面加载状态改变的时候执行这个方法.
document.onreadystatechange = subSomething;
function subSomething(){//当页面加载状态if(document.readyState == “complete”) {//code}
}

2.打开F12控制台使用js脚本获取状态

爬虫爬网页时,有时页面一直在加载中,这时候如果要停止加载,则可以执行js脚本: window.stop();

//当页面一直在加载中（比如引用某个图片或脚本未完成），但所需内容已显示出来
if (document.readyState == 'interactive') {window.stop();
}

实例：实现网页正在加载时，提示正在加载，加载完成后隐藏提示信息

<!doctype html>
<html>
<head><script src="../jquery.min.js"></script>
<meta charset="utf-8">
<title>加载状况提示</title><style>#noticediv{display: none;}</style>
</head><body><div id="noticediv">正在加载</div><img src="https://xxx.xxx/images/test.jpg" /><script>//当页面加载状态改变的时候执行这个方法.document.onreadystatechange = subSomething;function subSomething(){console.info("监听中...........")console.info("状态："+document.readyState);//当页面加载状态if(document.readyState=="interactive") {$("#noticediv").show();console.info("加载中。。。。。。。")}if(document.readyState=="complete") {$("#noticediv").hide();console.info("加载完成。。。。。。。")}
}</script></body>
</html>

JS网页加载状态判断相关推荐

Android开发笔记（六十四）网页加载与JS调用
内置浏览器网页视图WebView 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法.WebView就是A ...
检测jQuery.js是否已加载的判断代码
转载自http://www.jb51.net/article/27185.htm 测类.方法.变量或属性是否已存在,这是Javascript编程基础知识.在这里我们就是要检测jQuery()或$()函 ...
用 Flask 来写个轻博客 (28) — 使用 Flask-Assets 压缩 CSS/JS 提升网页加载速度
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读 Flask-Assets 将 Flask-Assets 应用 ...
Windows下使用apache模块实现合并多个js、css提高网页加载速度
这篇文章主要介绍了Windows下使用apache模块实现合并多个js.css提高网页加载速度,本文使用的模块是基于mod_concat自己修改的,需要的朋友可以参考下现在的网站表现力越来越丰富,页 ...
【清单】值得「等待」的12个指示加载状态的 js 库
以下优选 GitHub 上高 star 的指示加载状态的 JavaScript 库.另外这里还有10个有意思的 JavaScript 实战小项目供大家学习. 上期入口:一份数据分析学习清单.xls M ...
html加载状态,js等待页面加载完成
页面加载完成后等待一段时间在执行js的方法,时间例如方法: function test(){return 1;} 页面加载完毕事件: window.onload = function(){ setTi ...
CEF3—在网页加载前给js对象填值
文章目录 CEF3-在网页加载前给js对象填值前言思路代码 CEF3-在网页加载前给js对象填值前言记录一次笔者在实际开发中遇到的问题.在用cef做多页应用开发的时候,多个单页共享数据的问题 ...
mfc webbrowser判断网页加载完成
mfc 的webbrowser是大家使用非常多的一种查看操作网页的一种控件,在使用中,判断网页什么时候加载完成就显得非常重要了.下面介绍我采用的一种方法,这种方法可以判断网页内部即使有frame网页也 ...
开发那些事儿：如何解决js打包文件体积过大导致的网页加载慢问题？
智能分析网关作为我们新推出的产品,除了丰富的AI智能检测及视频功能之外,我们依然在持续拓展新AI算法的部署,并不断优化细节.提升用户的使用体验. 近期,我们对js打包文件体积过大的情况进行了优化,解决 ...

JS网页加载状态判断

JS网页加载状态判断相关推荐

最新文章

热门文章