1、图片预加载器插件的参数
| 参数 |
参数表示的意义 |
| data |
图片地址 |
| each |
监听图片加载过程 |
| success |
所有图片加载完成 |
2、图片预加载器js代码部分
function preLoad(options) {
//获取传入的资源图片路径数组
var data = options.data;
//定义变量来进行加载完成次数
var count = 0;
//定义变量来保存根据data生成的img对象
var imgs = [];
//遍历data生成img标签，并绑定事件
data.forEach(function (src) {
//创建img标签
var img = new Image();
//给标签赋值地址
img.src = src;
//创建好的图片放入imgs数组
imgs.push(img);
img.onload = function () {
count++;
//监听图片加载过程
options.each(count,data.length);
if (count == data.length) {
//所有图片加载完成
options.success(imgs);
}
}
})
}
3、代码示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片预加载器</title>
<style>
#wrap {
width: 800px;
margin: auto;
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
border: 1px solid red;
}
#wrap img{
width: 200px;
margin: 30px;
}
#mask {
width: 100px;
height: 100px;
border-radius: 10px;
color: #fff;
background-color: #888585;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
font-size: 30px;
font-weight: bold;
text-align: center;
line-height: 100px;
display: none;
}
</style>
</head>
<body>
<div id="mask">0%</div>
<div id="wrap"></div>
</body>
<script src="./Load.js"></script>
<script>
// 这里传入自己的图片地址
var data = [
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
"https://scpic.chinaz.net/files/pic/pic9/202101/apic30145.jpg",
]
//1、显示一下进度框
mask.style.display = 'block';
//2、调用函数进行图片的预加载
preLoad({
data : data,
//是在图片加载过程中不断调用的，now表示当前加载完成图片数量
each : function(now,total){
//修改以下mask中的显示的数值
mask.innerHTML = Math.floor(now / total * 100) + "%";
},
success : function(imgs){
//等加载完成之后
//1、关掉mask
mask.style.display = "none";
//2、向wrap中添加所有的已经生成好的图片
imgs.forEach(function(img){
wrap.appendChild(img);
})
}
})
</script>
</html>
网友评论