准备放假了！也是闲着了 ，就来整理之前学到或用到的一下知识点和使用内容，这次记录的是关于加载的友好性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" >
<img src="http://f.hiphotos.baidu.com/zhidao/pic/item/902397dda144ad3464639dc8d1a20cf430ad85a4.jpg" >
<img src="http://attach.bbs.miui.com/forum/201605/11/163127pv36vrzvj7ggz8u4.jpg" >
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249179.jpg" >
<img src="http://img2.imgtn.bdimg.com/it/u=1691627983,2796098531&fm=27&gp=0.jpg" >
<img src="http://a.hiphotos.baidu.com/zhidao/pic/item/78310a55b319ebc49ff591188026cffc1f1716a5.jpg" >
<img src="http://img2.imgtn.bdimg.com/it/u=3628218818,2760659836&fm=27&gp=0.jpg" >
<img src="http://img3.imgtn.bdimg.com/it/u=3373860863,3150615791&fm=214&gp=0.jpg" >
<img src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1302/04/c0/17981969_1359970249174.jpg" >
<img src="http://2t.5068.com/uploads/allimg/151028/57-15102QP537.jpg" >
<img src="http://d.hiphotos.baidu.com/zhidao/pic/item/6c224f4a20a44623aa0705099b22720e0df3d788.jpg" >
</body>
</html>
原文地址：https://www.cnblogs.com/itdansan/p/8419866.html
时间： 2024-11-08 19:27:14