1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" 2 "http://www.w3.org/TR/html4/strict.dtd"> 3 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en"> 5 <head> 6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 7 <title>8.图片预先加载-2 多图片加载</title> 8 <meta name="author" content="Administrator" /> 9 <!-- Date: 2014-12-12 --> 10 </head> 11 <script> 12 window.onload=function(){ 13 var arr=[ 14 'http://img02.taobaocdn.com/imgextra/i2/1041864065/TB2NypMbpXXXXaPXpXXXXXXXXXX-1041864065.jpg', 15 'http://img02.taobaocdn.com/imgextra/i2/1040428670/TB2Ah78bXXXXXX7XpXXXXXXXXXX_!!1040428670.jpg', 16 'http://img01.taobaocdn.com/imgextra/i1/1040428670/TB231c9bXXXXXX8XpXXXXXXXXXX_!!1040428670.jpg', 17 'http://img01.taobaocdn.com/imgextra/i1/1040428670/TB23vtRbpXXXXadXpXXXXXXXXXX_!!1040428670.jpg', 18 'http://img04.taobaocdn.com/imgextra/i4/1040428670/TB2uU4cbpXXXXaBXXXXXXXXXXXX_!!1040428670.jpg', 19 'http://img02.taobaocdn.com/imgextra/i2/1681344614/TB2EVv8aVXXXXb9XXXXXXXXXXXX_!!1681344614.jpg', 20 'http://img04.taobaocdn.com/imgextra/i4/774870258/TB2Oe77bXXXXXa2XpXXXXXXXXXX-774870258.jpg' 21 22 ] 23 var oImg1=document.getElementsByTagName('img')[0]; 24 var oImage= new Image(); 25 var iCur=0; 26 var i=0; 27 28 29 30 xunlei(); 31 32 function xunlei(){ 33 oImage.src=arr[iCur]; //iCur 初始为0,当第0张图片下下来后触发onload事件 34 oImage.onload=function(){ 35 iCur++; 36 if(iCur < arr.length){ 37 xunlei(); 38 } 39 document.title=iCur+'/'+arr.length; 40 }; 41 } 42 43 document.onclick=function(){ 44 i++; 45 if(i < arr.length){ 46 oImg1.src= arr[i]; 47 document.title=i+'/'+arr.length; 48 } 49 50 } 51 } 52 </script> 53 </head> 54 <body> 55 <img src='http://img02.taobaocdn.com/imgextra/i2/1041864065/TB2NypMbpXXXXaPXpXXXXXXXXXX-1041864065.jpg' style="400px;"> 56 </body> 57 </html> 58 <body> 59 60 </body> 61 </html>