canvas图片懒加载

整理一下从别处学来的一种图片懒加载的方式。

什么是图片懒加载，简单来说就是在web应用中，图片不会一次性全部加载，会在你看到该图片的时候在进行加载。即按需加载。

例如淘宝和京东商城等等app，页面上有大量的图片，当向下滑动的时候，图片会在滑到的时候加载。这是一种webapp的优化模式。

通常来说，在移动端上，一般是用img标签来放置图片，将图片data-src属性指向图片的url地址，然后将data-src的值赋给src属性。这样也可以实现加载图片。
< img src="" data-src="http://img...jpg" id=""/>

但是要进行优化，因此不采用给img标签增加src属性的方式，不用img展示，图片也不采用jpg、png24、png8等格式进行储存，而是用base64字符编码串保存到本地缓存localStorage中。这样下次打开网页的时候就可以直接读取缓存不必进行HTTP请求。
将img标签的data-src的值赋给canvas，然后将canvas添加到img标签后面，接下来将img节点删掉，用canvas将图画出来。
canvas支持硬件加速，当图片比较多的时候，列表（如果是列表格局）的性能也比较高。

具体原理是：

具体代码：

    // 缓存图片，并将图片渲染
var renderCvs = function(parent,max){
    //将img标签的class设置为lazyload，其父节点是a标签
    var lazyloadImage = $('.lazyload',parent);
    if(lazyloadImage.length<1){
       return;
    }
    var max = max||lazyloadImage.length;
    for(var i=0;i

有问题请直接评论或者联系我。

补充:
有位大哥指出，上述所说的懒加载方法是没有问题的，但是缓存方式有问题。localStorage有大小限制，5M，经过base64位编码，字符串扩大30%，容易超过容量。而且用户可能删除localStorage，容灾方式尚未解决。
所以建议直接使用浏览器自带的缓存，不使用localStorage