图片文件本地缓存
随着html5不断的被得到支持,从性能优化的角度讲,减少http请求是非常重要的优化手段。
html5的新的接口localstorage,提供了更大的存储空间,大部分浏览器支持5M的容量,足够存储JS等脚本文件。这样依赖就能减少一些HTTP请求,提升速度。
但也可以存储一些改动频率较低的静态图片,方案是将图标进行编码,存储该文件的编码。下面直接看代码:
var setImageSrc = function(img, src){
var local = localStorage.getItem("src"); //用src作key,也可以换其他标记
if(local){
img.src= local;
}else{
img.src = src;
img.onload = function(){
var canvas = document.createElement('canvas')
ctx = canvas.getContext('2d');
ctx.drawImage(img,0,0);
var data = canvas.toDataURL('jpg'); //注意,浏览器不一定支持jpg格式的转换,这时会自动降级到png格式
localStorage.setItem("src", data);
}
// 跨域
img.setAttribute("crossorigin","anonymous"); //关键属性
}
}
setImageSrc($('feedImg'),'http://test.com/img/header-logo.png');
这样就可以存储一些静态图片,但大小是图片本身的两倍,主要应用canvas的toDataURL函数
可以配合图片的懒加载使用
稍加改变,加上版本号,可以控制图片的改版发布了。
近期评论