因网页中图片太多可能会拖慢加载速度的解决方法

 

因网页中图片太多可能会拖慢加载速度的解决方法

Admin
2010年9月4日名人名言：书籍使人变得思想奔放——革拉特珂夫

因网页中图片太多可能会拖慢加载速度的解决方法

目前好多大型网站都有这种效果，就是首次只加载第一屏（能看得见的）的图片，之后的图片则不加载，如果你拖动滚动条至后面则加载，这样有效的避免了因图片过多而加载慢的弊端。

        JQuery为我们提供了两种方案：预加载和惰性加载。

        预加载：JQuery应用：图片依次加载代码。

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> $(window).bind( " load " ,  function () {
             var  preload  =   new  Array();
           $( " .hover " ).each( function () {
           s  =  $( this ).attr( " src " ).replace( / \.(.+)$ / i,  " _on.$1 " );
           preload.push(s)
          });
           var  img  =  document.createElement( " img " );
         $(img).bind( " load " ,  function () {
            if (preload[ 0 ]) {
               this .src  =  preload.shift();
           }
         }).trigger( " load " );
});  

 

 

       惰性加载：JQuery插件：LazyLoad，插件使用方式： 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> < script src = " jquery.js "  type = " text/javascript " >< / script>
< script src = " jquery.lazyload.js "  type = " text/javascript " >< / script>
调用：
$( " img " ).lazyload();

 

　 但是上面的插件其实还是下载了图片 也就是说http请求还是发送出去了,只不过在客户端lazyload人为的中断了图片的下载，而且拖滚动条的时候有点卡。

     下面是京东用的方法（唯一的缺点是，如果是ajax分页就不起作用，lazyload插件可以），思路是这样，把img的src指向固定的一张图片，然后自定义一个src2指向真正的图片地址，然后拖滚动条的时候再把src的地址替换为src2的地址。其实上面的插件也是这种思路，只是它不需要我们手动去设置src2和src地址了，它自动在代码里面把真正的地址先赋给original了。

代码如下：

 

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> < div  id ="Imglist" >
< img  alt =""  src ="http://images.cnblogs.com/null.gif"  src2 ="真正的地址"   />
</ div >

 

 

调用代码：

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> < script type = " text/javascript " >
     lazyload({
      defObj: " #Imglist "
     });
< / script>

 

js代码：

 

代码

<!--

Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/

--> function  lazyload(option){
       var  settings = {
       defObj: null ,
       defHeight: 0
      };
      settings = $.extend(settings,option || {});
       var  defHeight = settings.defHeight,defObj = ( typeof  settings.defObj == " object " ) ? settings.defObj.find( " img " ):$(settings.defObj).find( " img " );
       var  pageTop = function (){
        return  document.documentElement.clientHeight + Math.max(document.documentElement.scrollTop,document.body.scrollTop) - settings.defHeight;
      };
       var  imgLoad = function (){
       defObj.each( function (){    
         if  ($( this ).offset().top <= pageTop()){
          var  src2 = $( this ).attr( " src2 " );
          if  (src2){
          $( this ).attr( " src " ,src2).removeAttr( " src2 " );
         }
        }
       });
      };
      imgLoad();
      $(window).bind( " scroll " , function (){
       imgLoad();
      });
     }

 

 

Tag标签: 图片延迟加载,图片加载

书籍使人变得思想奔放——革拉特珂夫
来源：http://www.cnblogs.com/pxeric/archive/2010/09/04/1818134.html