canvas代替imgage，可以有效的提高大图片加载的速度！

//加载zepto插件
<script>
//定义图片的数量
var total = 17;
//获取屏幕的宽度
var zWin = $(window);
//定义渲染图片的方法
var render = function(){
//图片的间距
var padding = 2;
//图片存放位置的宽度
var winWidth = zWin.width();
//计算图片的宽度，以一行排列4张图为例，共有3个padding，取它的整数
var picWidth = Math.floor(winWidth - padding * 3)/4);
//定义图片的节点
var tmpl = '';
//循环获取这些图片，i=1从显示第一张图起
for(var i = 1; i < total; i++){
//不是所有图片都有padding-top，因此要重新定义padding
var p = padding;
//图片的src
var imgSrc = 'img/' + i + '.jpg';
//判断是不是第一张图片，第一张图片是没有padding-top
if(i%4 == 1){
//如果是第一张
p = 0;
}
//图片的宽高都设为一样，并将图片地址通过canvas画出来
tmpl += '<li style="width:"' + picWidth + 'px;height:' + picWidth + 'px;padding-top:'
+ padding + 'px"><canvas id = "cvs_" + i + '"></canvas></li>"';

//首先要，new一个图像的对象，用于存储图片信息
var imageObj = new Image();
//为这个对象指定唯一的标识
imageObj.index = i;
//加载这个对象
imageObj.onload = function(){
//定义canvas的绘图环境，并指定canvas的id为唯一标识，一张图片一个ID
var cvs = $('#cvs_' + this.index[0].getContext('2d'));
//定义这个canvas的宽高
cvs.width = this.width;
cvs.height = this.height;
//调用canvas的绘图方法，this为当前图像,后面两个0，代表canvas的偏移量：X，Y，可以手动调整
cvs.drawImage(this,0,0);
}
//给这个图像对象添加地址引用
imageObj.src = imgSrc;
}
}
</script>