您的位置：首页 > 其它

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

2016-09-22 16:05 316 查看

一个叫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
plain copy

<!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
plain copy

$.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;

};

默认触发appear的方式是：同时判断belowthefold和rightoffold为false的的时候触发appear

边界线：从可见到不可见的分割线

fold就是表示在总体容器中滚动条方向边界线的偏移坐标

而如果是$window对象，则滚动条最下面的水平线的高度为：$window.height() + $window.scrollTop()
如果是非$window容器，计算方式则是$(container).height() + $(container).offset().top

类似方法有多个，可以达到定制不同滚动条的效果，非常方便配置

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航