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

Posted 2020-10-09 礼拜16

//加载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>