Rumah >hujung hadapan web >tutorial js >JS简单网页进度条的实现代码
本文主要和大家分享JS简单网页进度条的实现代码,希望能帮助到大家。
<!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>
相关推荐:
Atas ialah kandungan terperinci JS简单网页进度条的实现代码. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!