准備放假了！也是閑着了 ，就來整理之前學到或用到的一下知識點和使用內容，這次記錄的是關於加載的友好性loading！！！這里記錄一下兩種加載方法
1.頁面加載的方法，它需要用到js里面兩個方法
- document.onreadystatechange = function(){}
- document.readyState//有兩個值
- interactive//加載中
- complete//加載完成
兩個方法同時使用
document.onreadystatechange = function(){ if(document.readyState == "complete"){//如果加載完成 $('.loading').fadeOut();//讓loading效果消失，顯示頁面 } }
這里同時介紹兩個網站：1.https://loading.io/，制作loading圖案的網頁，可以是svg，可以是gif，也可以是css3
2.https://icons8.com/preloaders/,同樣也是找loading特效的網頁
注意：都是部分要花錢，部分免費！
2.圖片加載方式，同樣的，需要用到js的Image圖像對象和onload方法
$(function(){ var $img = $('img'); var num = 0;//計算請求的個數 $img.each(function(i){//遍歷每個圖片 var oImg = new Image(); oImg.onload = function(){ oImg.onload = null;//避免重復請求 $('.loading b').html( parseInt(num/ $img.length*100)+'%');//請求的個數/請求總數 的百分比 num++;//每次遍歷請求，添加一次 if(num>= i){ $('.loading').fadeOut(); } } oImg.src = $img[i].src;
//注意：src屬性的添加必須要onload方法的后面，不然報錯！ }) })
下面是全部代碼：（圖片鏈接是遠程，jq是cnd，復制代碼可以直接加載）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
img{width:100%;}
.loading{background:green;position:fixed;top:0;left:0;width:100%;height:100%;z-index: 100;}
.loading .icon{width:100px;height:100px;position:absolute;top:0;left:0;right:0;bottom:0;margin:auto;font-size:30px;text-align:center;line-height:100px;color:white;}
.loading .icon span{display:block;position:absolute; width:80px;height:80px;border-radius:50%;box-shadow:0 2px 0 0 #ccc;top:10px;left:10px;animation:rotate 1s infinite linear;-webkit-animation:rotate 1s infinite linear;}
@keyframes rotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
@-webkit-keyframes rotate{
0%{-webkit-transform:rotate(0deg);}
100%{-webkit-transform:rotate(360deg);}
}
</style>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
$(function(){
var $img = $('img');
var num = 0;
$img.each(function(i){
var oImg = new Image();
oImg.onload = function(){
oImg.onload = null;//避免重復請求
$('.loading b').html( parseInt(num/ $img.length*100)+'%');
num++;
if(num>= i){
$('.loading').fadeOut();
}
}
oImg.src = $img[i].src;
})
})
</script>
</head>
<body>
<div class="loading">
<div class="icon">
<span></span>
<b>0%</b>
</div>
</div>
<img src="http://e.hiphotos.baidu.com/zhidao/pic/item/38dbb6fd5266d016bdeb8e0a932bd40735fa3525.jpg" alt="">
<img src="http://f.hiphotos.baidu.com/zhidao/pic/item/902397dda144ad3464639dc8d1a20cf430ad85a4.jpg" alt="">
<img src="http://attach.bbs.miui.com/forum/201605/11/163127pv36vrzvj7ggz8u4.jpg" alt="">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249179.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=1691627983,2796098531&fm=27&gp=0.jpg" alt="">
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/78310a55b319ebc49ff591188026cffc1f1716a5.jpg" alt="">
<img src="http://img2.imgtn.bdimg.com/it/u=3628218818,2760659836&fm=27&gp=0.jpg" alt="">
<img src="http://img3.imgtn.bdimg.com/it/u=3373860863,3150615791&fm=214&gp=0.jpg" alt="">
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249174.jpg" alt="">
<img src="http://2t.5068.com/uploads/allimg/151028/57-15102QP537.jpg" alt="">
<img src="http://d.hiphotos.baidu.com/zhidao/pic/item/6c224f4a20a44623aa0705099b22720e0df3d788.jpg" alt="">
</body>
</html>