• JS网页加载状态判断

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

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

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

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

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

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

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

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

     

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

    1. <!doctype html>
    2. <html>
    3. <head>
    4. 	<script src="../jquery.min.js"></script>
    5. <meta charset="utf-8">
    6. <title>加载状况提示</title>
    7. 	<style>
    8. 	
    9. 		#noticediv{
    10. 			display: none;
    11. 		}
    12. 	</style>
    13. </head>
    14.  
    15. <body>
    16. 	
    17. 	<div id="noticediv">正在加载</div>
    18. 	<img src="https://xxx.xxx/images/test.jpg" />
    19. 	<script>
    20. 		
    21. 		//当页面加载状态改变的时候执行这个方法.
    22. 		document.onreadystatechange = subSomething;
    23. 	function subSomething(){
    24. 		console.info("监听中...........")
    25. 		console.info("状态："+document.readyState);
    26.       //当页面加载状态
    27.       if(document.readyState=="interactive") {
    28.            $("#noticediv").show();
    29. 		  console.info("加载中。。。。。。。")
    30.       }
    31. 	if(document.readyState=="complete") {
    32.            $("#noticediv").hide();
    33. 		console.info("加载完成。。。。。。。")
    34.       }
    35. }
    36. 	
    37. 	</script>
    38. 	
    39. </body>
    40. </html>

  • 相关阅读:
    学生个人网页设计作品 学生个人网页模板 简单个人主页成品 个人网页制作 HTML学生个人网站作业设计 汉语言文学设计题材网页
    事务隔离（二）
    上周热点回顾（10.17-10.23）
    STM32F103标准库硬件IIC+DMA连续数据发送、接收
    行政寄件分析教程
    vue超好用的自定义指令封装
    vue3项目使用TypeIt打字机
    CPP 核心编程8-模板
    C- fread() & fwrite()
    1028 人口普查（JAVA）
  • 原文地址：https://blog.csdn.net/jingde528/article/details/127938880