作為前端開發(fā)人員，在日常開發(fā)中我們總會與圖片打交道，如果是直接使用圖片的話那是非常簡單的，比如做背景圖之類。然而當(dāng)圖片很多時，比如做一些游戲或者是瀑布流的效果時，如果直接使用會導(dǎo)致圖片還沒加載完成就開始運行程序，這樣會使程序運行紊亂，為了解決這個問題我們需要對圖片進(jìn)行預(yù)加載。
一種簡單的辦法就是把圖片的src值放在一個數(shù)組中，用for循環(huán)對數(shù)組進(jìn)行遍歷，創(chuàng)建圖片對象并將遍歷的src值加到圖片對象的src屬性上，之后在寫一個onload的回調(diào)函數(shù)就可以使用圖片對象了。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標(biāo)簽
var p = document.querySelector("#wrap p");
//獲取進(jìn)度條div
var wrap = document.querySelector("#wrap");
//獲取imgs的div
var imgsDiv = document.querySelector("#imgs");
//存放img對象的數(shù)組
var imgsArr = [];
for(var i = 0; i< arr.length; i++){
//創(chuàng)建img對象
var img = new Image();
//給圖片設(shè)置src屬性
img.src = arr[i];
//存放img對象
imgsArr.push(img);
//圖片預(yù)加載(當(dāng)圖片記載完畢之后，走的回調(diào)調(diào)函數(shù))
var count = 0;
img.onload = function(){
count++;
//加載圖片百分比
var rate = count / imgsArr.length * 100 + "%";
//給p標(biāo)簽設(shè)置內(nèi)容（進(jìn)度）
p
.innerHTML = rate;
//當(dāng)所有圖片加載完成之后，拼接到imgs這個div中
if(count >= imgsArr.length){
//當(dāng)所有圖片都加載完成，隱藏進(jìn)度條div
wrap.style.display = "none";
for(var j = 0; j < imgsArr.length; j++){
//插入img
imgsDiv.appendChild(imgsArr[j]);
}
}
}
}
</script>
</html>
很明顯如果圖片很多的話，光是寫數(shù)組就會很傷腦筋，而且上面的方法功能性不強，下面介紹一種更好的方法，對此我封裝了一個函數(shù)。
function loadingImg(obj){
var loadEndImg = {};//定義 加載完成后的圖片對象
var len = 0; //定義圖片的總張數(shù)
var prog = 0;//定義加載的進(jìn)度
for (var i in obj.loadImg){
len++; //自動計算總張數(shù)
}
for (var i in obj.loadImg){
//創(chuàng)建圖片對象
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);
}
}
}
}
使用方法：我們可以自己寫一個對象傳入上面的函數(shù)。
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){
//此時加載進(jìn)度為100%
};
},
complete:init //加載完成的回調(diào)函數(shù)
})
