图片预先加载多张图片预加载

最新推荐文章于 2022-05-04 12:13:19 发布

米雅

最新推荐文章于 2022-05-04 12:13:19 发布

阅读量567

点赞数

本文链接：https://blog.csdn.net/miyayeeh/article/details/102473330

版权

 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="width:400px;">
56     </body> 
57 </html>
58     <body>
59 
60     </body>
61 </html>