图片的预先加载

图片的预先加载讲解:

 1 <!DOCTYPE HTML>

 2 <html>

 3 <head>

 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

 5 <title>无标题文档</title>

 6 <script>

 7 /*

 8 我们经常会用下载软件下载电视剧,一个电视剧可以能有N集。

 9 1.先把所所有的集数全部下载完成,然后一个个开开心心的看。你真的开心吗?

10 2.我们先下一集,然后看完,看完以后再去下下一集,然后再看。

11 

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

13 

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

15 */

16 

17 window.onload = function() {

18     

19     var oImg = document.getElementById('img1');

20     

21     var oImage = new Image();

22     /*

23     属性:

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

25     onload : 当资源加载完成的时候触发

26     onerror : 当资源加载失败的时候触发

27     */

28     oImage.src = 'http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg';

29     oImage.onload = function() {

30         alert('加载完成');

31         

32         document.onclick = function() {

33             oImg.src = 'http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg';

34         }

35     }

36     

37     /*oImage.onerror = function() {

38         alert('加载出错');

39     }*/

40     

41     

42 }

43 </script>

44 </head>

45 

46 <body>

47     <img src="" id="img1" />

48 </body>

49 </html>

 

 

图片的预先加载应用实例:

  1 <!DOCTYPE HTML>

  2 <html>

  3 <head>

  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

  5 <title>无标题文档</title>

  6 <style>

  7 #ul1 {margin: 100px auto 0; padding: 0;}

  8 li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}

  9 img {width: 290px; height: 200px; display: block;}

 10 </style>

 11 <script>

 12 window.onload = function() {

 13     

 14     var oUl = document.getElementById('ul1');

 15     var aImg = oUl.getElementsByTagName('img');

 16     

 17     showImage();

 18     

 19     window.onscroll = showImage;

 20     

 21     function showImage() {

 22         

 23         var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;

 24         

 25         for (var i=0; i<aImg.length; i++) {

 26             

 27             if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) {

 28                 //alert(i);

 29                 aImg[i].src = aImg[i].getAttribute('_src');

 30                 aImg[i].isLoad = true;

 31             }

 32             

 33         }

 34         

 35     }

 36     

 37     function getTop(obj) {

 38         var iTop = 0;

 39         while(obj) {

 40             iTop += obj.offsetTop;

 41             obj = obj.offsetParent;

 42         }

 43         return iTop;

 44     }

 45     

 46 }

 47 </script>

 48 </head>

 49 

 50 <body>

 51     <ul id="ul1">

 52         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 53         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 54         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 55         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 56         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 57         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

 58         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

 59         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 60         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 61         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 62         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 63         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 64         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

 65         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

 66         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 67         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 68         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 69         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 70         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 71         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

 72         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

 73         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 74         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 75         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 76         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 77         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 78         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

 79         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

 80         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 81         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 82         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 83         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 84         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 85         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

 86         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

 87         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 88         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 89         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 90         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 91         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 92         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

 93         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

 94         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

 95         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

 96         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

 97         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

 98         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

 99         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

100         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

101         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>

102         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>

103         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>

104         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>

105         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>

106         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>

107         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>

108     </ul>

109 </body>

110 </html>

 

 

你可能感兴趣的:(图片)