大学IT网 - 最懂大学生的IT学习网站! QQ资料交流群:367606806
当前位置:大学IT网 > JavaScript技巧 > js实现图片的预先加载

js实现图片的预先加载

关键词:js图片预先加载  阅读(570) 赞(16)

[摘要]本文是对js实现图片的预先加载的讲解,对学习JavaScript编程技术有所帮助,与大家分享。

图片的预先加载讲解:

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <script>
 /*
 我们经常会用下载软件下载电视剧,一个电视剧可以能有N集。
 1.先把所所有的集数全部下载完成,然后一个个开开心心的看。你真的开心吗?
 2.我们先下一集,然后看完,看完以后再去下下一集,然后再看。
 
 3.我们先下第一集,下载完成以后,再看第一集的时候去下载后面的内容,这样,我们可以在看前面的内容的时候,把后面的下完了,节约了很多的时间
 
 在页面刚打开的时候,我们去加载第一张图片,然后页面加载完成以后,在用户看的时间内,去加载后面的内容,那么我们必须有个工具(迅雷) -> Image对象
 */
 
 window.onload = function() {
     
     var oImg = document.getElementById('img1');
     
     var oImage = new Image();
     /*
     属性:
     src : 当我们给Image对象的src属性赋值一个url的时候,这个Image对象就去会加载url资源,加载完成以后的资源被保存到了浏览器的缓存文件夹里面,下次如果我们要去调用这个url地址的时候,直接是从缓存文件夹读取到的,所以速度很快。
     onload : 当资源加载完成的时候触发
     onerror : 当资源加载失败的时候触发
     */
     oImage.src = 'http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg';
     oImage.onload = function() {
         alert('加载完成');
         
         document.onclick = function() {
             oImg.src = 'http://b.hiphotos.baidu.com/image/w%3D2048/sign=526ef7bda41ea8d38a227304a332314e/1ad5ad6eddc451dae05f4cedb4fd5266d016320e.jpg';
         }
     }
     
     /*oImage.onerror = function() {
         alert('加载出错');
     }*/
     
     
 }
 </script>
 </head>
 
 <body>
     <img src="" id="img1" />
 </body>
 </html>

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

 <!DOCTYPE HTML>
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>无标题文档</title>
 <style>
 #ul1 {margin: 100px auto 0; padding: 0;}
 li {float: left; margin:0 0 10px 10px; list-style:none; border: 1px solid black;}
 img {width: 290px; height: 200px; display: block;}
 </style>
 <script>
 window.onload = function() {
     
     var oUl = document.getElementById('ul1');
     var aImg = oUl.getElementsByTagName('img');
     
     showImage();
     
     window.onscroll = showImage;
     
     function showImage() {
         
         var scrollTop  = document.documentElement.scrollTop || document.body.scrollTop;
         
         for (var i=0; i<aImg.length; i++) {
             
             if ( !aImg[i].isLoad && getTop(aImg[i]) < scrollTop + document.documentElement.clientHeight ) {
                 //alert(i);
                 aImg[i].src = aImg[i].getAttribute('_src');
                 aImg[i].isLoad = true;
             }
             
         }
         
     }
     
     function getTop(obj) {
         var iTop = 0;
         while(obj) {
             iTop += obj.offsetTop;
             obj = obj.offsetParent;
         }
         return iTop;
     }
     
 }
 </script>
 </head>
 
 <body>
     <ul id="ul1">
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/1.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/2.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/3.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/4.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/5.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/6.jpg" src="img/white.JPG" /></li>
         <li><img _src="img/7.jpg" src="img/white.JPG" /></li>
     </ul>
 </body>
 </html>


相关评论