手机站点开发及手机中图片加速显示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();