延时加载

一、为什么使用延迟加载技术：

 1 避免浪费带宽 节约流量

 2 减轻服务器的压力 带来更好的用户体验

当页面内图片达到一定的数量,页面的加载速度就越来越差.

我们并不需要把所有图片一次性加载完,而且,用户也不会一次性把所有图片看完.

所以,我们需要做的就是按需加载,只显示用户需要看的图片

图片惰性延迟加载好处

1. 按需加载图片,加快加载页面速度

2. 减少对服务器的请求数

3. 减少初始页面加载页面大小

图片惰性延迟加载坏处

1. SEO,因为图片都被替换成假的图片,所以会影响图片的收录,所以这功能不建议在详情页使用

未加图片惰性加载功能:

图片惰性延迟性能对比

已加图片惰性加载功能:

二、原理

  随着用户向下滚动页面，只有当图片滚动到可视视窗内，或接近可视视窗时，这个图片才会从服务器加载。这样就是尽可能的减少不必要的加载。

三、使用方法

  只需要在图片上这样写：

 <img class="lazy" data-original="img/example.jpg"  >

  【 如果此处不使用class 可在初始化时使用：

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

  初始化设置：

<script type="text/javascript" charset="utf-8">

  $(function() {

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

  });

</script> 】

  然后用一段js

$(function() {

    $("img.lazy").lazyload();

});

 需要引用的插件：

<script src="jquery-1.11.0.min.js"></script>

<script src="jquery.lazyload.js"></script> 

参数设置

$("img.lazy").lazyload({

  placeholder : "img/grey.gif",       //用图片提前占位

  effect: "fadeIn",                  // 载入使用淡入效果；

  threshold: 200,                   // 滚动条在离目标位置还有200的高度时就开始加载图片；    

  event: ‘click‘,                  // 事件触发时才加载 有:值有click(点击),mouseover(鼠标划过)等；

  container: $("#container"),     // 对某容器中的图片实现效果；值为某容器 如window；

  failurelimit : 10              // 图片排序混乱时， 值为数字.lazyload默认在找到第一张不在可见区域里的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题

 附：

1.背景图片的延迟加载

  背景图延迟加载的用法和图片延时加载的用法很相似，首先，你需要使用背景的元素需要这样写：

  <div class="lazy" data-original="img/example.jpg" ></div>

  然后用一段js

  $(function() {

    $("div.lazy").lazyload();

});

详见：http://www.webhek.com/background-image-lazy-load/ 

      http://www.jq22.com/jquery-info390

2.浏览器兼容性：

 适应 火狐 谷歌 safari ie 6~11

3.含有轮播效果的延迟加载？

=====================================

参考链接http://www.itnose.net/detail/6633575.html

 ====================================

(function( $ ){

$.fn.imglazyload = function( options ){

    var o = $.extend({

                attr        :   ‘lazy-src‘,

                container   :   window,

                event       :   ‘scroll‘,              

                fadeIn      :   false,         

                threshold   :   0,

                vertical    :   true   

            }, options ),

        event = o.event,

        vertical = o.vertical,

        container = $( o.container ),

        threshold = o.threshold,   

        // 将jQuery对象转换成DOM数组便于操作

        elems = $.makeArray( $(this) ),    

        dataName = ‘imglazyload_offset‘,       

        OFFSET = vertical ? ‘top‘ : ‘left‘,

        SCROLL = vertical ? ‘scrollTop‘ : ‘scrollLeft‘,        

        winSize = vertical ? container.height() : container.width(),

        scrollCoord = container[ SCROLL ](),

        docSize = winSize + scrollCoord;      

    // 延迟加载的触发器

    var trigger = {

         init : function( coord ){

            return coord >= scrollCoord &&

                            coord <= ( docSize + threshold );

        },

        scroll : function( coord ){

            var scrollCoord = container[ SCROLL ]();

            return coord >= scrollCoord &&

                    coord <= ( winSize + scrollCoord + threshold );

        },

        resize : function( coord ){

            var scrollCoord = container[ SCROLL ](),

                winSize = vertical ?

                            container.height() :

                            container.width();

            return coord >= scrollCoord &&

                   coord <= ( winSize + scrollCoord + threshold );

        }

    };

    var loader = function( triggerElem, event ){

        var i = 0,

            isCustom = false,

            isTrigger, coord, elem, $elem, lazySrc;

        // 自定义事件只要触发即可，无需再判断

        if( event ){

            if( event !== ‘scroll‘ && event !== ‘resize‘ ){

                isCustom = true;

            }

        }

        else{

            event = ‘init‘;

        }             

        for( ; i < elems.length; i++ ){

            isTrigger = false;

            elem = elems[i];

            $elem = $( elem );

            lazySrc = $elem.attr( o.attr );

            if( !lazySrc || elem.src === lazySrc ){

                continue;

            }

            // 先从缓存获取offset值，缓存中没有才获取计算值,

            // 将计算值缓存，避免重复获取引起的reflow

            coord = $elem.data( dataName );

            if( coord === undefined ){

                coord = $elem.offset()[ OFFSET ];

                $elem.data( dataName, coord );

            }

            isTrigger = isCustom || trigger[ event ]( coord );         

            if( isTrigger ){

                // 加载图片

                elem.src = lazySrc;

                if( o.fadeIn ){

                    $elem.hide().fadeIn();

                }

                // 移除缓存

                $elem.removeData( dataName );

                // 从DOM数组中移除该DOM

                elems.splice( i--, 1 );

            }

        }

        // 所有的图片加载完后卸载触发事件

        if( !elems.length ){

            if( triggerElem ){

                triggerElem.unbind( event, fire );

            }

            else{

                container.unbind( o.event, fire );

            }

            $( window ).unbind( ‘resize‘, fire );

            elems = null;

        }

         };

    var fire = function( e ){

        loader( $(this), e.type );

    };

         // 绑定事件

    container = event === ‘scroll‘ ? container : $( this );

    container.bind( event, fire );

    $( window ).bind( ‘resize‘, fire );

    // 初始化

    loader();

    return this;

};

})( jQuery );

 ============================