Home > Article > Web Front-end > JS implements simple code sharing for web page progress bar

JS implements simple code sharing for web page progress bar

小云云Original: 2018-02-27 15:04:031451browse

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>

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!

JavaScript JS

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of js array deduplication and sortingNext article：Detailed explanation of js array deduplication and sorting

See more

JS implements simple code sharing for web page progress bar

Related articles