Javascript 特訓(xùn)-2
今天把加載圖片緩存的思路給梳理清楚闯团，方便自己的作品集網(wǎng)站以后加載圖片晾虑，更快速疹味。盡量減少 html 結(jié)構(gòu)，多用 js 來代替帜篇，方便后期維護(hù)糙捺。
圖片加載思路，即當(dāng)網(wǎng)站第一次加載圖片后笙隙，留一個(gè)圖片備份（即緩存）洪灯，當(dāng)網(wǎng)站第二次加載該圖片時(shí)，如果有緩存竟痰，則直接加載緩存签钩，減少再次加載該圖片的消耗。
(function () {
// 存緩存圖片
var imageCache = [];
// 圖片加載完后的回調(diào)函數(shù)
var callBacks = [];
// 加載函數(shù)
function load(imageUrl) {
// 判斷是單個(gè)照片還是多個(gè)照片
if (imageUrl instanceof Array) {
imageUrl.forEach(function (url) {
loadUrl(url);
});
}
else {
loadUrl(url);
}
}
// 加載處理函數(shù)
function loadUrl(url) {
// 有緩存凯亮，直接返回
if (imageCache[url]) {
return imageCache[url];
}
// 沒有緩存边臼，創(chuàng)建緩存
else {
var image = new Image();
// 加載完成后，加入緩存數(shù)組
image.onload = function () {
imageCache[url] = image;
// 所有圖片加載完后假消，執(zhí)行函數(shù)
if (isReady()) {
callBacks.forEach(function (func) {
func();
});
}
}
// 監(jiān)聽事件放在觸發(fā)事件之前
imageCache[url] = false;
image.src = url;
}
}
// 獲取某個(gè)緩存圖片
function get(url) {
return imageCache[url];
}
// 判斷圖片是否完全加載完柠并，執(zhí)行回調(diào)函數(shù)
function isReady() {
var ready = true;
for (var img in imageCache) {
if (!imageCache[img]) {
ready = false;
break;
}
}
return ready;
}
// 加載執(zhí)行函數(shù)
function onReady(func) {
callBacks.push(func);
}
window.Resources = {
load: load,
get: get,
onReady: onReady,
isReady: isReady
};
})();
