手机站点开发及手机中图片加速显示img的Canvas方法

随着手机开发越来越流行，手机开发的非常多框架也应运而生，比較好用的手机站点开发框架推荐例如以下：

1、zeptojs。里面封装了非常多手机特有方法，比如touch.js等等。

和jquery使用方法差点儿相同，非常好上手！

API地址：http://zeptojs.com/#$.extend

2、jquerymobile   演示地址：http://jquerymobile.com/

3、angularjsmobile  演示地址：http://mobileangularui.com/

近期做手机开发项目是。遇到图片载入非常慢的情况。对这样的情况，手机开发一般用canvas方法载入：

详细的canvas API 參见：http://javascript.ruanyifeng.com/htmlapi/canvas.html

以下举例说明一个canvas的样例：

<li><canvas></canvas></li>

js动态载入图片和li

总共举例17张图片！

var total=17;

var zWin=$(window);

var render=function(){

   var padding=2;

   var winWidth=zWin.width();

   var picWidth=Math.floor((winWidth-padding*3)/4);

   var tmpl ='';

   for (var i=1;i<=totla;i++){

    var p=padding;

	var imgSrc='img/'+i+'.jpg';

	if(i%4==1){

	  p=0;

	}

	tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';

	var imageObj = new Image();

	imageObj.index = i;

	imageObj.onload = function(){

	   var cvs =$('#cvs_'+this.index)[0].getContext('2d');

	   cvs.width = this.width;

	   cvs.height=this.height;

	   cvs.drawImage(this,0,0);

	}

	imageObj.src=imgSrc;

   }

}

render();