图片预加载

/*
我们经常会用下载软件下载电视剧,一个电视剧可以能有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="width:400px;">
34     </body> 
35 </html>
View Code

 

posted @ 2014-12-12 17:13  miyaye  阅读(133)  评论(0编辑  收藏  举报