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

标签：前端   手机   canvas   js   

    随着手机开发越来越流行，手机开发的很多框架也应运而生，比较好用的手机网站开发框架推荐如下：

    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>

总共举例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;
	image.Obj.onload = function(){
	   var cvs =$('#cvs_'+this.index)[0].getContext('2d');
	   cvs.width = this.width;
	   cvs.height=this.height;
	   cvs.drawImage(this,0,0);
	}
	imageObject.src=imgSrc;
   }

}
render();

手机网站开发及手机中图片加速显示img的Canvas方法,布布扣,bubuko.com

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

标签：前端   手机   canvas   js   

原文地址：http://blog.csdn.net/confidence68/article/details/37522939