1.什么是預(yù)加載
將所有的圖片內(nèi)容請(qǐng)求下來，送到頁面中
2.預(yù)加載作用
預(yù)加載圖片是提高用戶體驗(yàn)的一個(gè)很好方法。圖片預(yù)先加載到瀏覽器中，這對(duì)圖片畫廊及圖片占據(jù)很大比例的網(wǎng)站來說十分有利，它保證了圖片快速、無縫地發(fā)布，也可幫助用戶在瀏覽網(wǎng)站內(nèi)容時(shí)獲得更好的用戶體驗(yàn)。
3.預(yù)加載的封裝
function loading(obj) {
var data = obj.data;
var progressFun = obj.progress;
var doneFun = obj.done;
// 記錄圖片總個(gè)數(shù)
var allCount = 0;
for (var key in data) {
allCount++;
}
// 創(chuàng)建數(shù)組，用于存放所有加載好的圖片對(duì)象
var imgsObj = {};
// 遍歷對(duì)象
for (var key in data) {
var value = data[key];
// 創(chuàng)建Image對(duì)象
var img = new Image();
img.src = value;
// 不能直接使用.的方式添加屬性，因?yàn)槟菢訜o法替換key的值
imgsObj[key] = img;
// 記錄完成加載的圖片的個(gè)數(shù)
var doneCount = 0;
img.onload = function () {
doneCount++;
// 計(jì)算當(dāng)前的進(jìn)度
var v = doneCount / allCount * 100;
if (progressFun) {
progressFun(v);
}
// 如果全部加載完成，則需要進(jìn)行回調(diào)
if (doneCount == allCount) {
if (doneFun) {
doneFun(imgsObj);
}
}
}
}
}
