JS implémente un partage de code simple pour la barre de progression des pages Web-js tutoriel-php.cn

JS implémente un partage de code simple pour la barre de progression des pages Web

小云云

Libérer： 2018-02-27 15:04:03

original

1451 Les gens l'ont consulté

Cet article partage principalement avec vous le code simple pour implémenter la barre de progression des pages Web dans JS. J'espère qu'il pourra vous aider.

<!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>

Copier après la connexion

Recommandations associées :

Exemple de méthode d'écriture JS de la barre de progression d'une page Web

Articles recommandés sur la barre de progression d'une page Web

Un exemple simple de barre de progression d'une page Web javascript

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!