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>