首页 > 代码库 > 手机网站开发及手机中图片加速显示img的Canvas方法

手机网站开发及手机中图片加速显示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=http://www.mamicode.com/'img/'+i+'.jpg';>