整理一下從別處學來的一種圖片懶加載的方式抛猖。
什么是圖片懶加載，簡單來說就是在web應(yīng)用中毯盈，圖片不會一次性全部加載沫换，會在你看到該圖片的時候在進行加載。即按需加載。
例如淘寶和京東商城等等app，頁面上有大量的圖片，當向下滑動的時候凳兵，圖片會在滑到的時候加載。這是一種webapp的優(yōu)化模式菱魔。
通常來說留荔，在移動端上，一般是用img標簽來放置圖片澜倦，將圖片data-src屬性指向圖片的url地址聚蝶，然后將data-src的值賦給src屬性。這樣也可以實現(xiàn)加載圖片藻治。
< img src="" data-src="http://img...jpg" id=""/>
但是要進行優(yōu)化碘勉，因此不采用給img標簽增加src屬性的方式，不用img展示桩卵，圖片也不采用jpg验靡、png24倍宾、png8等格式進行儲存，而是用base64字符編碼串保存到本地緩存localStorage中胜嗓。這樣下次打開網(wǎng)頁的時候就可以直接讀取緩存不必進行HTTP請求高职。
將img標簽的data-src的值賦給canvas，然后將canvas添加到img標簽后面辞州，接下來將img節(jié)點刪掉怔锌，用canvas將圖畫出來。
canvas支持硬件加速变过，當圖片比較多的時候埃元，列表（如果是列表格局）的性能也比較高。
具體原理是：
具體代碼：
// 緩存圖片媚狰，并將圖片渲染
var renderCvs = function(parent,max){
//將img標簽的class設(shè)置為lazyload岛杀，其父節(jié)點是a標簽
var lazyloadImage = $('.lazyload',parent);
if(lazyloadImage.length<1){
return;
}
var max = max||lazyloadImage.length;
for(var i=0;i<max;i++){
var imgId = lazyloadImage[i].id;
//再次打開網(wǎng)頁，讀取緩存崭孤，如果有类嗤，就從緩存中展示
var imageCache = localStorage.getItem(imgId);
if(imageCache){
lazyloadImage[i].src = imageCache;
continue;
}
var img = new Image();
img.index = i;
img.id = imgId;
img.crossorigin="anonymous";
img.onload = function(){
var _this = this;
var zCvs = $('#'+this.id);
var domCvs = zCvs[0];
domCvs.src = this.src;
zCvs.removeClass('lazyload');
try{
var cvs = document.createElement('canvas');
cvs.style.display = 'none';
document.body.appendChild(cvs);
var rcvs = cvs.getContext('2d');
cvs.width = 140;
cvs.height = 108;
rcvs.drawImage(this,0,0,140,108);
//這里進行緩存 ，toDataURL()方法將url轉(zhuǎn)成base64字符串
setTimeout(function(){
var data = cvs.toDataURL();
//將字符串保存到localStorage中
localStorage.setItem(_this.id,data);
document.body.removeChild(cvs);
},200);
}catch(ex){
}
}
img.src = lazyloadImage[i].getAttribute('data-src');
}
}
有問題請直接評論或者聯(lián)系我裳瘪。
補充:
有位大哥指出土浸，上述所說的懶加載方法是沒有問題的罪针，但是緩存方式有問題彭羹。localStorage有大小限制，5M泪酱，經(jīng)過base64位編碼派殷，字符串擴大30%，容易超過容量墓阀。而且用戶可能刪除localStorage毡惜，容災(zāi)方式尚未解決。
所以建議直接使用瀏覽器自帶的緩存斯撮，不使用localStorage
