網頁Loding效果的實現
阿新 • • 發佈：2019-01-07
想要實現loading效果，實現得了解兩個文件屬性
1、document.onreadystatechange //頁面載入狀態改變
2、document.readyState //該屬性描述了文件的載入狀態。
這兩個屬性的具體資訊在這裡就不贅述了，文件裡有詳細的解說。下面直接上網頁loading的例項
1、gif圖顯示loding效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>通過載入狀態事件</title> <style> .loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: white} .pic{width: 200px;height: 200px;background: url("./loading.gif");position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto} </style> </head> <body> <div class="loading"> <div class="pic"></div> </div> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355553324&di=2e1ede87f22112337ccce7ec0cf97386&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201406%2F20%2F20140620193408_hcjVU.jpeg" alt=""> <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355660779&di=7153fbb120fbfcd512383a7c3d06e7e2&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5937a60ca3457.jpg" alt=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005783233,2516055246&fm=27&gp=0.jpg" alt=""> <img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3653772120,518447571&fm=27&gp=0.jpg" alt=""> <img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=734056024,4079806076&fm=27&gp=0.jpg" alt=""> <img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=171845386,3897452318&fm=27&gp=0.jpg" alt=""> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script> </body> </html>
這裡我拿了一些百度圖片填充頁面，然後給頁面加了一 層遮罩層 ，最後將準備好的gif圖放在頁面最上面顯示出來，這樣子設定好了之後頁面就一直是這個gif圖，下面我們要用JS進行判斷
<script>
document.onreadystatechange=function () {
if(document.readyState === "complete"){
$(".loading").fadeOut(); //如果文件載入完畢，那麼就把遮罩層去掉
}
}</script>頁面就顯示出來了。
2、用css3動畫取代gif動圖
CSS3的動畫可以做很多事情，這裡我們可以用動畫來替代gif動圖節省網路資源
3、頂部進度條loding效果<style> .loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: white} .pic{width: 50px;height: 50px;position: absolute;left: 0;top: 0;bottom: 0;right: 0;margin: auto} .loading .pic i {display: block;float: left;width: 6px;height: 50px;background: aqua;margin: 0 2px; -webkit-animation: load 1.2s infinite; animation: load 1.2s infinite} .loading .pic i:nth-child(2){-webkit-animation-delay: 0.1s;animation-delay: 0.1s} .loading .pic i:nth-child(3){-webkit-animation-delay: 0.2s;animation-delay: 0.2s} .loading .pic i:nth-child(4){-webkit-animation-delay: 0.3s;animation-delay: 0.3s} .loading .pic i:nth-child(5){-webkit-animation-delay: 0.4s;animation-delay: 0.4s} @-webkit-keyframes load { 0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)} 20%{-webkit-transform: scaleY(1);transform: scaleY(1);} } @keyframes load { 0%,40%,100%{-webkit-transform: scaleY(0.4);transform: scaleY(0.4)} 20%{-webkit-transform: scaleY(1);transform: scaleY(1);} } </style> <div class="loading"> <div class="pic"> <i></i> <i></i> <i></i> <i></i> </div> </div>
現在很常見的一種載入效果，就是頂部有一個載入條，對應網頁載入的進度，這種loding效果其實就是再網頁頂部設定一個 載入條，然後利用文件至上而下的載入方式來動態改變進度條的長度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>通過載入狀態事件</title>
<style>
.loading{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background-color: white}
.pic{width: 10%;height: 5px;position: absolute;left: 0;top: 0;right: 0;background-color: aqua}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>
<div class="loading">
<div class="pic"></div>
</div>
<header>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355553324&di=2e1ede87f22112337ccce7ec0cf97386&imgtype=0&src=http%3A%2F%2Fimg4.duitang.com%2Fuploads%2Fitem%2F201406%2F20%2F20140620193408_hcjVU.jpeg" alt="">
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1530355660779&di=7153fbb120fbfcd512383a7c3d06e7e2&imgtype=0&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F1%2F5937a60ca3457.jpg" alt="">
</header>
<script>$(".loading .pic").animate({width:"30%"},100)</script>
<section>
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3653772120,518447571&fm=27&gp=0.jpg" alt="">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3005783233,2516055246&fm=27&gp=0.jpg" alt="">
</section>
<script>$(".loading .pic").animate({width:"60%"},100)</script>
<footer>
<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=734056024,4079806076&fm=27&gp=0.jpg" alt="">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=171845386,3897452318&fm=27&gp=0.jpg" alt="">
</footer>
<script>$(".loading .pic").animate({width:"100%"},100)</script>
<script>
document.onreadystatechange=function () {
if(document.readyState === "complete"){
$(".loading").fadeOut();
}
}
</script>
</body>
</html>4、根據網頁載入情況而改變的百分比數字loding效果
這種就是根據網頁的載入情況，然後去改變遮罩層的百分比數字，至於百分比如何判斷每個網頁都不一樣