作为前端开发人员，在日常开发中我们总会与图片打交道，如果是直接使用图片的话那是非常简单的，比如做背景图之类。然而当图片很多时，比如做一些游戏或者是瀑布流的效果时，如果直接使用会导致图片还没加载完成就开始运行程序，这样会使程序运行紊乱，为了解决这个问题我们需要对图片进行预加载。
一种简单的办法就是把图片的src值放在一个数组中，用for循环对数组进行遍历，创建图片对象并将遍历的src值加到图片对象的src属性上，之后在写一个onload的回调函数就可以使用图片对象了。demo代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body,html{
height: 100%;
}
#wrap{
width: 100%;
height: 100%;
background-color: red;
position: relative;
}
#wrap p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
font-size: 100px;
}
</style>
</head>
<body>
<div id="wrap">
<p>0%</p>
</div>
<div id="imgs"></div>
</body>
<script type="text/javascript">
var arr = ["http://www.pp3.cn/uploads/allimg/111116/11021321R-4.jpg","http://img1.imgtn.bdimg.com/it/u=1521482949,816209794&fm=206&gp=0.jpg","http://pic5.nipic.com/20100121/4183722_103138000079_2.jpg","http://www.pp3.cn/uploads/allimg/111112/110G31K5-6.jpg"];
//获取p标签
var p = document.querySelector("#wrap p");
//获取进度条div
var wrap = document.querySelector("#wrap");
//获取imgs的div
var imgsDiv = document.querySelector("#imgs");
//存放img对象的数组
var imgsArr = [];
for(var i = 0; i< arr.length; i++){
//创建img对象
var img = new Image();
//给图片设置src属性
img.src = arr[i];
//存放img对象
imgsArr.push(img);
//图片预加载(当图片记载完毕之后，走的回调调函数)
var count = 0;
img.onload = function(){
count++;
//加载图片百分比
var rate = count / imgsArr.length * 100 + "%";
//给p标签设置内容（进度）
p
.innerHTML = rate;
//当所有图片加载完成之后，拼接到imgs这个div中
if(count >= imgsArr.length){
//当所有图片都加载完成，隐藏进度条div
wrap.style.display = "none";
for(var j = 0; j < imgsArr.length; j++){
//插入img
imgsDiv.appendChild(imgsArr[j]);
}
}
}
}
</script>
</html>
很明显如果图片很多的话，光是写数组就会很伤脑筋，而且上面的方法功能性不强，下面介绍一种更好的方法，对此我封装了一个函数。
function loadingImg(obj){
var loadEndImg = {};//定义 加载完成后的图片对象
var len = 0; //定义图片的总张数
var prog = 0;//定义加载的进度
for (var i in obj.loadImg){
len++; //自动计算总张数
}
for (var i in obj.loadImg){
//创建图片对象
var imgObj = new Image();
imgObj.src = obj.loadImg[i];
imgObj.key = i;
imgObj.onload = function (){
loadEndImg[this.key] = this;
prog++;
if (obj.prog){
obj.prog(parseInt(prog/len*100));
}
if (prog>=len&&obj.complete){
obj.complete(loadEndImg);
}
}
}
}
使用方法：我们可以自己写一个对象传入上面的函数。
loadingImg({
loadImg: {
img1:"img/cross_bg.png",
img2:"img/game_bg.png",
img3:"img/goddess0.png",
img4:"img/goddess1.png",
img5:"img/goddess2.png"
},
prog: function(num){
$("#prog").html(num+"%");
// console.log(num);
if(num==100){
//此时加载进度为100%
};
},
complete:init //加载完成的回调函数
})
网友评论