本文主要跟大家分享JS實作網頁進度條簡單程式碼，希望能幫助大家。 jquery实现简单网页进度条 * { 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; } /* 通过加载事件来完成网页加载事件 onreadystatechange:页面加载状态改变时的状态 document.readyState：返回当前文档的状态 1.uninitialized - 还未开始加载 2.loading - 载入中 3.interactive - 已加载， 文档与用户可以开始交互 4.complete - 载入完成 */ document.onreadystatechange = function () { if (document.readyState == "complete") { //判断状态 $(".loading").fadeOut(); } }
