图片预加载

/*
我们经常会用下载软件下载电视剧，一个电视剧可以能有N集。
1.先把所所有的集数全部下载完成，然后一个个开开心心的看。你真的开心吗？
2.我们先下一集，然后看完，看完以后再去下下一集，然后再看。

3.我们先下第一集，下载完成以后，再看第一集的时候去下载后面的内容，这样，我们可以在看前面的内容的时候，把后面的下完了，节约了很多的时间

在页面刚打开的时候，我们去加载第一张图片，然后页面加载完成以后，在用户看的时间内，去加载后面的内容，那么我们必须有个工具（迅雷） -> Image对象
*/

/*
属性：
src : 当我们给Image对象的src属性赋值一个url的时候，这个Image对象就去会加载url资源，加载完成以后的资源被保存到了浏览器的缓存文件夹里面，下次如果我们要去调用这个url地址的时候，直接是从缓存文件夹读取到的，所以速度很快。
onload : 当资源加载完成的时候触发
onerror : 当资源加载失败的时候触发
*/

 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>7.图片预先加载</title>
 8         <meta name="author" content="Administrator" />
 9         <!-- Date: 2014-12-12 -->
10         <script>
11         
12      
13 window.onload=function(){
14   
15                  var oImg1=document.getElementsByTagName('img')[0];
16                  var oImage= new Image();
17                   oImage.src='http://gb.cri.cn/mmsource/images/2014/08/11/0/5240451376502243632.jpg';
18                  oImage.onload=function(){
19                      alert('下载完成');
20                      };
21                 
22                  oImage.onerror=function(){
23                      alert('下载出错')
24                      }
25                   
26                   document.onclick=function(){
27                      oImg1.src='http://gb.cri.cn/mmsource/images/2014/08/11/0/5240451376502243632.jpg';
28                  }
29             }
30         </script>
31     </head>
32     <body>
33         <img src=''/ style="400px;">
34     </body> 
35 </html>

View Code