懶加載與預(yù)加載的基本概念。
懶加載也叫延遲加載：前一篇文章有介紹：JS圖片延遲加載 延遲加載圖片或符合某些條件時(shí)才加載某些圖片。
預(yù)加載：提前加載圖片，當(dāng)用戶需要查看時(shí)可直接從本地緩存中渲染。
兩種技術(shù)的本質(zhì)：兩者的行為是相反的，一個(gè)是提前加載，一個(gè)是遲緩甚至不加載。懶加載對(duì)服務(wù)器前端有一定的緩解壓力作用，預(yù)加載則會(huì)增加服務(wù)器前端壓力。
懶加載的意義及實(shí)現(xiàn)方式有：
意義： 懶加載的主要目的是作為服務(wù)器前端的優(yōu)化，減少請(qǐng)求數(shù)或延遲請(qǐng)求數(shù)。
實(shí)現(xiàn)方式：
1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進(jìn)行加載延遲.
2.第二種是條件加載，符合某些條件，或觸發(fā)了某些事件才開(kāi)始異步下載。
3.第三種是可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個(gè)主要由監(jiān)控滾動(dòng)條來(lái)實(shí)現(xiàn)，一般會(huì)在距用戶看到某圖片前一定距離遍開(kāi)始加載，這樣能保證用戶拉下時(shí)正好能看到圖片。
預(yù)加載的意義及實(shí)現(xiàn)方式有：
預(yù)加載可以說(shuō)是犧牲服務(wù)器前端性能，換取更好的用戶體驗(yàn)，這樣可以使用戶的操作得到最快的反映。實(shí)現(xiàn)預(yù)載的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();，設(shè)置其src來(lái)實(shí)現(xiàn)預(yù)載，再使用onload方法回調(diào)預(yù)載完成事件。只要瀏覽器把圖片下載到本地，同樣的src就會(huì)使用緩存，這是最基本也是最實(shí)用的預(yù)載方法。當(dāng)Image下載完圖片頭后，會(huì)得到寬和高，因此可以在預(yù)載前得到圖片的大小(方法是用記時(shí)器輪循寬高變化)。
怎么樣才能實(shí)現(xiàn)預(yù)加載？
我們可以通過(guò)google一搜索：可以看到很多人用這種方式進(jìn)行預(yù)加載：代碼如下：
復(fù)制代碼
function loadImage(url,callback) {
var img = new Image();
img.src = url;
img.onload = function(){
img.onload = null;
callback.call(img);
}
}
復(fù)制代碼
在google或者火狐下測(cè)試 都是正常的 不管我怎么刷新都是正常的，但是在IE6下不是這樣的 我點(diǎn)擊一下 是正常 再次點(diǎn)擊或者重新刷新都不正常。下面的jsfiddle地址：有興趣的同學(xué)可以試試 點(diǎn)擊按鈕后 彈出正常結(jié)果 再次點(diǎn)擊在IE6下就不執(zhí)行onload里面的方法了，接著重新刷新也不行。
想要看效果，點(diǎn)擊我！
為什么其他瀏覽器正常的：其實(shí)原因很簡(jiǎn)單，就是瀏覽器緩存了，除了IE6以外(即說(shuō)opera也會(huì)，但是我特意用opera試了下，沒(méi)有，可能版本的問(wèn)題吧，或許現(xiàn)在已經(jīng)修復(fù)了。)，其他瀏覽器重新點(diǎn)擊會(huì)再次執(zhí)行onload方法，但是IE6是直接從瀏覽器取的。
那現(xiàn)在怎么辦？最好的情況是Image可以有一個(gè)狀態(tài)值表明它是否已經(jīng)載入成功了。從緩存加載的時(shí)候，因?yàn)椴恍枰却?，這個(gè)狀態(tài)值就直接是表明已經(jīng)下載了，而從http請(qǐng)求加載時(shí)，因?yàn)樾枰却螺d，這個(gè)值顯示為未完成。這樣的話，就可以搞定了。經(jīng)過(guò)google搜索下即介紹：發(fā)現(xiàn)有一個(gè)為各個(gè)瀏覽器所兼容的Image的屬性——complete。所以，在圖片onload事件之前先對(duì)這個(gè)值做一下判斷即可。最后，代碼變成如下的樣子：
復(fù)制代碼
function loadImage(url,callback) {
var img = new Image();
img.src = url;
if(img.complete) { // 如果圖片已經(jīng)存在于瀏覽器緩存，直接調(diào)用回調(diào)函數(shù)
callback.call(img);
return; // 直接返回，不用再處理onload事件
}
img.onload = function(){
img.onload = null;
callback.call(img);
}
}
復(fù)制代碼
也就是說(shuō)如果圖片已經(jīng)在瀏覽器緩存里面 那么支持直接從瀏覽器緩存取得直接執(zhí)行img.complete里面的函數(shù) 接著返回.
但是我們可以看到上面的代碼：必須等圖片加載完成后，可以執(zhí)行回調(diào)函數(shù)，也可以說(shuō)等圖片加載后，我們可以獲取圖片的寬度和高度。那么如果我們想提前獲取圖片的尺寸那怎么辦？上網(wǎng)經(jīng)驗(yàn)告訴我：瀏覽器在加載圖片的時(shí)候你會(huì)看到圖片會(huì)先占用一塊地然后才慢慢加載完畢，并且不需要預(yù)設(shè)width與height屬性，因?yàn)闉g覽器能夠獲取圖片的頭部數(shù)據(jù)。基于此，只需要使用javascript定時(shí)偵測(cè)圖片的尺寸狀態(tài)便可得知圖片尺寸就緒的狀態(tài)。代碼如下：（但是有個(gè)前提是 這個(gè)方式不是我想的，也不是我寫的代碼，是網(wǎng)上朋友總結(jié)的代碼 我只是知道有這么一個(gè)原理）
復(fù)制代碼
var imgReady = (function(){
var list = [],
intervalId = null;
// 用來(lái)執(zhí)行隊(duì)列
var queue = function(){
for(var i = 0; i < list.length; i++){
list[i].end ? list.splice(i--,1) : list[i]();
}
!list.length && stop();
};
// 停止所有定時(shí)器隊(duì)列
var stop = function(){
clearInterval(intervalId);
intervalId = null;
}
return function(url, ready, error) {
var onready = {},
width,
height,
newWidth,
newHeight,
img = new Image();
img.src = url;
// 如果圖片被緩存，則直接返回緩存數(shù)據(jù)
if(img.complete) {
ready.call(img);
return;
}
width = img.width;
height = img.height;
// 加載錯(cuò)誤后的事件
img.onerror = function () {
error && error.call(img);
onready.end = true;
img = img.onload = img.onerror = null;
};
// 圖片尺寸就緒
var onready = function() {
newWidth = img.width;
newHeight = img.height;
if (newWidth !== width || newHeight !== height ||
// 如果圖片已經(jīng)在其他地方加載可使用面積檢測(cè)
newWidth * newHeight > 1024
) {
ready.call(img);
onready.end = true;
};
};
onready();
// 完全加載完畢的事件
img.onload = function () {
// onload在定時(shí)器時(shí)間差范圍內(nèi)可能比onready快
// 這里進(jìn)行檢查并保證onready優(yōu)先執(zhí)行
!onready.end && onready();
// IE gif動(dòng)畫(huà)會(huì)循環(huán)執(zhí)行onload，置空onload即可
img = img.onload = img.onerror = null;
};
// 加入隊(duì)列中定期執(zhí)行
if (!onready.end) {
list.push(onready);
// 無(wú)論何時(shí)只允許出現(xiàn)一個(gè)定時(shí)器，減少瀏覽器性能損耗
if (intervalId === null) {
intervalId = setInterval(queue, 40);
};
};
}
})();
復(fù)制代碼
調(diào)用方式如下：
imgReady('http://img01.taobaocdn.com/imgextra/i1/397746073/T2BDE8Xb0bXXXXXXXX-397746073.jpg',function(){
alert('width:' + this.width + 'height:' + this.height);
});
