前言
在一個應用中，通常會有很多圖片，眾所周知，加載圖片需要時間，在圖片沒有加載出來之前，頁面會是空白，為了提升用戶體驗，應用的開發人員使出渾身解數，其中最為常見的就是在圖片沒有加載完成之前，有一個加載動畫。這裡用到的技術主要是圖片預加載。圖片預加載的原理並不難，當給一個Image對象設置src屬性後，圖片就開始加載。給Image對象指定事件要位於設置src屬性之前。
涉及到的內容
1.需要預加載的圖片並不僅僅只是一張，通常將所有圖片的信息保存在一個數組或者對象中，為了加載所有的圖片，需要遍歷出所有的圖片。
2.當所有圖片加載完後，又要接著執行其他的任務，這需要一個回調函數。
3.記錄已經完成加載的圖片數量，並實時的反應到頁面上。
編碼開始
注：html和css省略，主要講解js文件
1.為了代碼復用，我將圖片預加載相關的代碼封裝在imageloader.js模塊中，並暴露出一個接口。
2.入口文件是index.js，入口文件的代碼如下：
var loadImage = require('./imageloader.js');
loadImage(['./img/rabbit-big.png','./img/face_slogan.png','./img/footer.png'],finish);
//finish是一個所以圖片完成加載之後執行的回調函數
function finish(){
document.body.innerHTML = '完成加載'
}
3.imageloader.js模塊代碼入下：
'use strict';
/**
* 預加載圖片的函數
* @param elem 顯示加載進度的元素
* @param images 加載圖片的數組或者對象
* @param callback 全部圖片加載完畢後調用的回調函數
* @param timeout 加載超時的時長
*/
function loadImage(elem,images,callback,timeout){
//遍歷出圖片的計數器
var count = 0;
//默認全部圖片都能成功加載
var success = true;
//超時timer的id
var timerId = 0;
//默認不會加載超時
var isTimeout = false;
//已經加載完成的長度
var loaded = 0;
//對圖片數組（或對象）進行遍歷
for(var key in images){
//過濾掉prototype上的屬性
if(!images.hasOwnProperty(key)){
continue;
}
//獲得每個圖片元素
//期望每個圖片元素是一個object：{src:XXX}
var item = images[key];
if(typeof item === "string"){
item = images[key] = {
src:item
}
}
//如果格式不滿足期望，則進行下一次遍歷
if(!item || !item.src){
continue;
}
//計算+1
++ count;
//設置圖片元素的id
item.id = '__img__' + key + getId();
//設置圖片元素的image，它是一個image對象
item.image = window[item.id] = new Image();
doLoad(item);
}
//如果計數為0，則直接調用callback
if(!count){
callback(success);
}else if(timeout){//如果設置了最長加載時間
timerId = setTimeout(onTimeout,timeout)
}
/**
* 真正進行圖片預加載的函數
* @param item 圖片元素的對象
*/
function doLoad(item){
item.state = 'loading';
var img = item.image;
//圖片加載成功的一個回調函數
img.onload = function(){
//只要有一張出現加載失敗，success就會為false
success = success & true;
item.state = 'load';
loaded ++;
done();
};
//圖片加載失敗的回調函數
img.onerror = function(){
success = false;
item.state = 'error';
loaded ++;
done();
};
//加載圖片
img.src = item.src;
/**
* 每張圖片加載完成的回調函數，不論成功還是失敗
*/
function done(){
//清除綁定的事件
img.onload = null;
img.onerror = null;
try{
delete window[item.id]
}catch (e){
}
elem.innerHTML = '已加載' + (loaded / count * 100) + '%';
//當所有圖片加載完成並且沒有超時的情況，清除定時器，且執行回調函數
if(count === loaded && !isTimeout){
clearTimeout(timerId);
callback(success);
}
}
}
/**
* 超時函數
*/
function onTimeout(){
isTimeout = true;
success = false;
callback(success);
}
}
var __id = 0;
function getId(){
return ++ __id;
}
module.exports = loadImage;
4.我使用的是webpack進行打包，如果你對打包還不熟悉，可以點擊這兒學習。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持。