JS implements simple code sharing for web page progress bar-JS Tutorial-php.cn

JS implements simple code sharing for web page progress bar

小云云

Release： 2018-02-27 15:04:03

Original

1451 people have browsed it

This article mainly shares with you the simple code to implement the web page progress bar in JS. I hope it can help you.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>jquery实现简单网页进度条</title>
   <style>
       * {
           margin: 0;
           padding: 0;
       }
       /*大小和body一样,盖住全部内容*/
       .loading {
           width: 100%;
           height: 100%;
           background: #fff;
           position: fixed;
           top: 0;
           left: 0;
           z-index: 999;
       }
       /*图片和父容器大小一样*/
       img {
           width: 100%;
       }
       /*加载动画*/
       .loading .pic {
           width: 200px;
           height: 100px;
           background: url(img/07.gif) no-repeat center;
           /* 大家可以去www.loading.io浏览一下，里面提供了很多进度条小动画 */
           position: absolute;
           top: 0;
           left: 0;
           right: 0;
           bottom: 0;
           margin: auto;
       }
   </style>
</head>
<body>
   <p class="loading">
       <p class="pic"></p>
   </p>
       
   <!-- 页面加载完成后要展示的图片 -->
   <img src="01.jpg" alt="">
   <img src="02.jpg" alt="">
   <img src="06.jpg" alt="">
</body>
<script>
 /*  
   通过加载事件来完成网页加载事件
       onreadystatechange:页面加载状态改变时的状态
       document.readyState：返回当前文档的状态
       
       1.uninitialized - 还未开始加载
       2.loading       - 载入中
       3.interactive   - 已加载， 文档与用户可以开始交互
       4.complete      - 载入完成
   */
   document.onreadystatechange = function () {
       if (document.readyState == "complete") { //判断状态
           $(".loading").fadeOut();
       }
   }
   
</script>
</html>

Copy after login

Related recommendations:

JS writing example method of web page progress bar

javascript Simple example of web page progress bar

The above is the detailed content of JS implements simple code sharing for web page progress bar. For more information, please follow other related articles on the PHP Chinese website!