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

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