Mobile website development and mobile phone image acceleration Display img Canvas method

With the development of mobile phone more and more popular, mobile phone development of many frameworks have emerged, the more useful mobile website development framework recommended as follows:

1, Zeptojs, which encapsulates a lot of mobile phone-specific methods, such as touch.js and so on. Similar to jquery usage, very good to get started!

API Address: Http://zeptojs.com/#$.extend

2. Jquerymobile Demo Address: http://jquerymobile.com/

3. Angularjsmobile Demo Address: http://mobileangularui.com/

Recently do mobile phone development project is, encounter picture loading very slow situation, in this case, mobile phone development is generally used with the canvas method loading:

For specific canvas APIs see: http://javascript.ruanyifeng.com/htmlapi/canvas.html

An example of a canvas is illustrated below:

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

JS dynamic loading pictures and Li

For a total of 17 photos!

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 ();