手机网站开发及手机中图片加速显示img的Canvas方法
浏览数：42 /
时间：2015年06月11日
随着手机开发越来越流行，手机开发的很多框架也应运而生，比较好用的手机网站开发框架推荐如下：
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;
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();
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
