注册 登录  
 加关注
查看详情
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火山左儿

学无止境

 
 
 

日志

 
 

图片延迟加载,惰性加载  

2012-05-19 18:00:57|  分类: 计算机应用问题 |  标签: |举报 |字号 订阅

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

        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();
      });
     }
  评论这张
 
阅读(1493)| 评论(0)
推荐 转载

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018