Canvas Method for mobile website development and image acceleration in mobile phones

Canvas Method for mobile website development and image acceleration in mobile phones

As mobile phone development becomes more and more popular, many mobile phone development frameworks have emerged. The following is a good recommendation for mobile website development frameworks:

1. zeptojs contains many unique Mobile Phone methods, such as touch. js. Similar to jquery, it is easy to get started!

API address: http://zeptojs.com/?#.extend

2. jquerymobile demo address: http://jquerymobile.com/

3. angularjsmobile demo address: http://mobileangularui.com/

Recently, I was working on a mobile phone Development Project, where image loading was slow. In this case, mobile phone development usually loads images using the canvas method:

For more information about the canvas API, see http://javascript.ruanyifeng.com/htmlapi/canvas.html.

The following is an example of a canvas:

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

Js dynamic loading of images and li

A total of 17 images are provided!

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