Web图片滚动条加载、延迟加载技术LazyLoad研究

最新推荐文章于 2024-07-29 07:54:54 发布

水麒麟灬

最新推荐文章于 2024-07-29 07:54:54 发布

阅读量1.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/shaobo8910/article/details/52624011

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一个叫LazyLoad的jQuery插件

官网：

http://www.appelsiini.net/projects/lazyload

非压缩源码(1.8.5)2013-8-11 20:20:42：

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

压缩版本(1.8.5)2013-8-11 20:20:42：

https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js

插件运行demo示例，滚动可见触发图片加载(带渐入动画效果)

http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

带容器的demo，也就是不是window对象的滚动条，而是一个div对象内滚动可见触发图片加载

http://www.appelsiini.net/projects/lazyload/enabled_container.html

延迟加载，也就是实现比如等待5秒后，再加载图片的用法

http://www.appelsiini.net/projects/lazyload/enabled_timeout.html

如果浏览器禁用javascript，则可以通过noscript标签进行兼容处理

http://www.appelsiini.net/projects/lazyload/enabled_noscript.html

通过ajax来加载图片

http://www.appelsiini.net/projects/lazyload/enabled_ajax.html

加载及大量的图片优化(也就是在一个特定的事件(scrollstop)下才进行加载)，原理是，用户在拖动滚轮的时候可能是为了"快进"，为了达到某一个特殊的位置的过渡过程当中，鼠标滚轮一般是不会停下来的(一直按住鼠标左键的状态下)，当停下来后，scrollstop时间会被自动触发(鼠标左键现在仍然在按下的状态当中)，这样就可以更细节地优化图片的加载数量，让不希望加载的图片直接被跳过。应验了一句话：“根据位置来小气地决定是否加载”

http://www.appelsiini.net/projects/lazyload/enabled_gazillion.html

Special scroll events for jQuery

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

下面贴一段自己写的demo代码：

[html]view plaincopy 
   
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
 <html xmlns="http://www.w3.org/1999/xhtml">  
   
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
     <title>图片延迟加载demo by sonikk</title>  
     <meta name="generator" content="sonikk demo" />  
     <link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />  
     <style type="text/css">  
     .d1  
     {  
         width:400px;  
         height:400px;  
         border:1px solid gray;  
         overflow:hidden;  
     }  
     </style>  
     <script src="jquery.min.js?v=1.9.1" charset="utf-8"></script>  
     <script src="jquery.lazyload.js?v=1.8.5" charset="utf-8"></script>  
     <script type="text/javascript" charset="utf-8">  
       
         // http://www.appelsiini.net/projects/lazyload  
       $(function() {  
         
             //event: "click",  
             // 配合timer进行定时加载  
             // event: "sporty",  
             // 提前多少像素(px)加载  
             // threshold : 200,  
           $("img.lazy").lazyload({  
               effect : "fadeIn"  
                 
               /*  
               appear : function(elements_left, settings) {  
                   console.log("appear");  
                   console.log(elements_left);  
                   //console.log(this, elements_left, settings);  
               },  
               load : function(elements_left, settings) {  
                   console.log("load");  
                   console.log(elements_left);  
                   //console.log(this, elements_left, settings);  
               }  
               */  
           });  
       });  
         
     /*  
     $(window).bind("load", function() {   
         var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);  
     });  
     */  
     </script>  
     
 </head>  
   
 <body>  
   
     <div class ="d1" >  
     <img class="lazy" src="grey.jpg" data-original="http://www.baidu.com" onerror="this.src='http://cdn-img.easyicon.net/png/5332/533283.png';" alt="pic1">  
     </div>  
   
     <div class ="d1" >  
     <img class="lazy" src="grey.jpg" data-original="http://e.hiphotos.baidu.com/pic/w%3D230/sign=9512c07838dbb6fd255be2253925aba6/b8014a90f603738d6dbf78a1b21bb051f919ecb8.jpg" alt="pic2">  
     </div>  
       
     <div class ="d1" >  
     <img class="lazy" src="grey.jpg" data-original="http://g.hiphotos.baidu.com/album/w%3D2048/sign=1f7c5f8cb90e7bec23da04e11b16b838/dc54564e9258d10995a3e231d058ccbf6d814df4.jpg" alt="pic3">  
     </div>  
       
     <div class ="d1" >  
     <img class="lazy" src="grey.jpg" data-original="http://c.hiphotos.baidu.com/pic/w%3D230/sign=01960ab6a08b87d65042ac1c37092860/91529822720e0cf36540f67c0b46f21fbf09aa86.jpg" alt="pic4">  
     </div>  
       
     <div class ="d1" >  
     <img class="lazy" src="grey.jpg" data-original="http://a.hiphotos.baidu.com/pic/w%3D230/sign=3b10ea2c14ce36d3a20484330af23a24/37d12f2eb9389b502f67f6a48435e5dde6116eaf.jpg" alt="pic5">  
     </div>  
       
     <div class ="d1" >  
     <img class="lazy" src="grey.jpg" data-original="http://b.hiphotos.baidu.com/pic/w%3D230/sign=8f20ef2a3c6d55fbc5c671255d234f40/3b87e950352ac65cb98fe587faf2b21192138ab8.jpg" alt="pic6">    
     </div>  
   
 </body>  
 </html>  

lazyload在jQuery上扩展了一个方法叫

function lazyload(options)

{

}

使用方法是：

$("img.lazy").lazyload( { effect : "fadeIn" } );

lazyload对象的结构如下所示：

lazyload

{

var elements = this;

var $container; // 该值如果设置了settings.container就是settings.container 否则是$(window)

var settings;

}

而var settings又包括

{

threshold 提前偏移量

failure_limit 失败限制

event 由哪个事件触发加载

effect 图片下载后通过播放什么动画来展现图像

container 绑定事件的容器

data_attribute存放要加载图像url的自定义属性

skip_invisible是否跳过不可见

appear 当对象出现时可选注册监听函数 (默认null)

load 当对象加载完成事情可选注册监听函数 (默认null)

}

把options的键值对追加到settings成员变量当中

默认是scroll事件会触发appear

如果settings.event当中的事件名称不为"scroll"，则会重新绑定一个事件，并在事件内调用appear函数，执行加载

因此要查看图片是怎么加载的实现方法，就应该顺藤摸瓜来到appear函数内探个究竟。

关键方法是：

$container.scrollTop();

这个可以获取已经滚掉的高度，也就是在显示容器以上未显示的那部分高度。

appear事件的检验条件：

下面的方法判断东西在边界线下方，在下方或刚好相等返回true，否则返回false

[javascript]view plaincopy 
   
 $.belowthefold = function(element, settings) {  
      var fold;  
        
      if (settings.container === undefined || settings.container === window) {  
          fold = $window.height() + $window.scrollTop();  
      } else {  
          fold = $(settings.container).offset().top + $(settings.container).height();  
      }  
   
   
      return fold <= $(element).offset().top - settings.threshold;  
  };  