JavaScript——图片加载很慢

若遇到图片加载很慢的问题，对这种情况，手机开发一般用canvas方法加载：

具体的canvas API 参见：http://javascript.ruanyifeng.com/htmlapi/canvas.html

下面举例说明一个canvas的例子：

[html]  view plain  copy

1. <li><canvas></canvas></li>  

js动态加载图片和li 总共举例17张图片！

[html]  view plain  copy

1. var total=17;  
2.   
3. var zWin=$(window);  
4.   
5. var render=function(){  
6.   
7.   var padding=2;  
8.   
9.   var winWidth=zWin.width();  
10.   
11.   var picWidth=Math.floor((winWidth-padding*3)/4);  
12.   
13.   var tmpl ='';  
14.   
15.   for (var i=1;i<=totla;i++){  
16.   
17.   var p=padding;  
18.   
19.   var imgSrc='img/'+i+'.jpg';  
20.   
21.   if(i%4==1){  
22.   
23.    p=0;  
24.   
25.   }  
26.   
27.   tmpl +='<li style="width:'+picWidth+'px;height:'+picWidth+'px;padding-left:'+p+'px;padding-top:'+padding+'px;"><canvas id="cvs_'+i+'"></canvas></li>';  
28.   
29.   var imageObj = new Image();  
30.   
31.   imageObj.index = i;  
32.   
33.   imageObj.onload = function(){  
34.   
35.     var cvs =$('#cvs_'+this.index)[0].getContext('2d');  
36.   
37.     cvs.width = this.width;  
38.   
39.     cvs.height=this.height;  
40.   
41.     cvs.drawImage(this,0,0);  
42.   
43.   }  
44.   
45.   imageObj.src=imgSrc;  
46.   
47.   }  
48.   
49.    
50.   
51. }  
52.   
53. render();