html图片缓存6,imgCache6.html

Document

清除缓存

//获取img url

var imgAY = document.querySelectorAll('img');

var srcImg = [];

for (var i = 0; i < imgAY.length; i++) {

srcImg.push(imgAY[i].getAttribute('data-src'));

}

var imgBase = {};

localStrogeImg(srcImg);

/**

* [localStrogeImg 图片本地缓存]

* @Author zhanggongze

* @DateTime 2017-06-01

* @param {[type]} srcImg [图片data-src属性]

* @return {[type]} [description]

*/

function localStrogeImg(srcImg) {

//获取缓存数据

var oCaches = store.get('imgCache');

var cacheArray = []; //缓存多张图片

imgBase = (oCaches == undefined ? {} : oCaches);

//检查是否已经缓存

if (JSON.stringify(imgBase) != '{}') {

for (var k = 0; k < srcImg.length; k++) {

var isCache = false;

for (key in oCaches) {

if (key == srcImg[k]) {

cacheImg(k)

isCache = true;

}

}

if (!isCache) {

console.log('有新图片,缓存需要更新了!!!!');

loadImg(srcImg[k], k);

}

}

} else {

for (var j = 0; j < srcImg.length; j++) {

//存储至本地的对象

loadImg(srcImg[j], j);

}

}

//读取缓存图片

function cacheImg(m) {

var index = srcImg[m];

imgAY[m].setAttribute('src', oCaches[index]);

}

//读取服务器上的图片

function loadImg(src, index) {

var oImg = new Image();

oImg.src = src;

oImg.onload = function() {

//展示图片

imgAY[index].setAttribute('src', src);

//转码

imgBase[src] = getBase64Image(oImg);

//将64位的编码保存至本地

try {

store.set('imgCache', imgBase);

} catch (e) {

var oC = store.get('imgCache');

for(item in oC){

if(item === srcImg[0]){

console.log(item);

delete oC[srcImg[0]];

}

}

console.log(oC);

store.set('imgCache', imgBase);

// console.log(srcImg[0]);

// store('imgCache').remove({"name":srcImg[0],function(){

// console.log('删除成功！');

// }})

// console.log(e);

}

// console.log(imgBase);

};

};

//ID选择器

function selectId(str) {

return document.querySelector(str);

}

//元素选择器

function selectAll(str) {

return document.querySelectorAll(str);

}

//转码

function getBase64Image(img) {

var canvas = document.createElement("canvas");

canvas.width = img.width;

canvas.height = img.height;

var ctx = canvas.getContext("2d");

ctx.drawImage(img, 0, 0, img.width, img.height);

var dataURL = canvas.toDataURL("image/jpg");

return dataURL

}

/**

* [combineObj 合并两个对象]

* @Author zhanggongze

* @DateTime 2017-06-02

* @param {[type]} o1 [主对象]

* @param {[type]} o2 [被合并的对象]

* @return {[type]} [obj]

*/

function combineObj(obj1, obj2) {

var obj = {};

for (item in obj1) {

obj[item] = obj1[item];

}

for (item in obj2) {

obj[item] = obj2[item];

}

return obj;

}

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史