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

图片预加载

时间:2014-12-12 18:50:06      阅读:118      评论:0      收藏:0      [点我收藏+]

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

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

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

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

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

 

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>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

 

图片预加载

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

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

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