lazy加载

先引入

$(function () {
        $("img.lazyload").lazyload({
            threshold: 200,
            effect: "fadeIn"
        });
    });

.lazyload()里面带了两个参数，他们分别代表什么意思，还有没有其他的参数呢？

threshold: 200,    // 当距离图片还有200像素的时候，就开始加载图片。

effect: "fadeIn",  // 控制显示图片的效果，fadeIn的效果淡入动画。

container: $("#container")  // 父容器。指定哪个父容器中的图片延迟加载。

event: "click",     // 默认的触发事件是滚动，当你滚动的时候，就会检查然后加载。
                       你可以使用event属性，设置你自己的加载事件，之后你可以自定义触发这个事件的条件，然后去加载图像。

// event: 'scrollstop' // 当页面中存在上百张，甚至数百张图片时，建议使用 scrollstop 事件。
                       scrollstop 介绍地址：https://j11y.io/javascript/special-scroll-events-for-jquery

具体参数说明

/*
* container：window  

* event:  默认值 'scroll',另外还有scrollstop，sporty，click

* effect: 默认值 'show'，加载使用的动画效果。
          如 show, fadeIn, slideDown 等 jQuery 自带的效果，或者自定义动画。

* effectspeed: 默认值 undefined，动画时间。
               作为 effect 的参数使用：effect(effectspeed)

* data_attribute: 默认值 'original'，真实图片地址的 data 属性后缀

* threshold: 默认值 0，灵敏度。
             表示当图片出现在显示区域中的立即加载显示；
             设为整数表示图片距离 x 像素进入显示区域时进行加载；
             设为负数表示图片进入显示区域 x 像素时进行加载。

* failure_limit: 默认值 0，容差范围。
                 页面滚动时，Lazy Load 会遍历延迟加载的图片，检查是否在显示区域内，
                 默认找到第 1 张不可见的图片时，就终止遍历。
                 因为 Lazy Load 认为图片的排序是与 HTML 中的代码中的排序相同，但是也可能会出现例外，
                 通过该值来扩大容差范围。

* skip_invisible: 默认值 true，跳过隐藏的图片。图片不可见时（如 display:none），不强制加载。

* appear: 默认值 null，图片加载时的事件 (Function)，
          有 2 个参数：elements_left（未加载的图片数量）、settings（lazyload 的参数）。

* load: 默认值 null，图片加载后的事件 (Function)，
        有 2 个参数，同 appear 。
*
* */

注1： 当你指定了哪个父容器中的图片做延迟加载时，你需要给这个父容器写一写样式，例如：

#container {
     height: 600px;
     overflow: scroll;
}

而jQuery代码可以像下面这样写：

$("img.lazyload").lazyload({
    container: $("#container")  
});

当浏览器不支持 JavaScript 时的降级处理

<img class="hide" src="清晰度较低或者loading的gif图片.jpg" data-original="example.jpg" width="765" height="574">
<noscript><img src="./img/真实的图像.jpg" width="765" height="574"></noscript>

<!--noscript 包含真实的图像位置，当浏览器不支持 Javascript，直接显示图像。
对现有图像，隐藏处理，使用 show() 方法触发显示。-->

上面的class="hide"我们需要给它添加一行样式：

.hide {
    display: none;
}

这个时候，我们的jQuery代码可以像下面这样写：

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

另一个使用场景：当前显示区域内的图片先进行加载，显示区域外的图片延迟5秒之后再加载

这个地方需要用event:'sporty'
jQuery的具体代码如下：

$(function(){
    $('img').lazyload({
        effect:'fadeIn',
        event:'sporty'
    });
});

$(window).bind('load', function(){
    var timeout = setTimeout(function(){
        $('img').trigger('sporty')
    }, 5000);
});

标签：lazy,加载,effect,lazyload,默认值,event,图片
来源： https://www.cnblogs.com/youmenzi/p/15699943.html