码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2014-12-12 18:55:10      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   ar   color   os   sp   on   

bubuko.com,布布扣
 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>
View Code

 

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

标签:style   blog   http   io   ar   color   os   sp   on   

原文地址:http://www.cnblogs.com/webskill/p/4160131.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!