jQuery-lazyload图片延迟加载使用详解

作者: 愿你如夏日清凉的风 | 来源:发表于2017-11-23 15:15 被阅读209次

jQuery-lazyload图片延迟加载使用详解
懒加载和预加载
JS
图片懒加载
js 实现图片懒加载
前端图片优化的方案
lazyload.js
javascript图片懒加载与预加载的分析
移动开发tips
单例模式

lazyload是一个jQuery的插件，当你的项目中有很多图片或者有大图的时候，你希望只有在滚动条快滚动到图片的位置时再加载图片，而如果用户没有再往下滚动滚动条的时候，图片不需要加载，那么，你就可以用到这个插件，它的作用就是延迟加载。
我们先来看一个特别简单的示例，然后再看看他们中的每一块代表什么意思：

jQuery-lazyload 示例.jpeg

具体的原理我这里就不做过多介绍，您可以到文章最后的几个地址进行了解。我写这篇文章的目的是想直接通过代码的方式能让你马上上手使用，所以下面我会把整理的代码展示出来。

在你项目中的img标签可以像下面这样写：

<img class="lazyload" src="./img/清晰度较低或者loading的gif图片.jpg" 
alt="活动现场图片" 
data-original="./img/真正想要显示的图片.jpg" 
width="750" height="360">

<!--
注1：添加width和height有助于在图片未加载时占满所需要的空间
注2：class="lazyload" 是为了区别哪些图片需要延迟加载，哪些不需要。
这个例子中，我们只针对img标签中class带lazyload的需要延时加载处理。
而lazyload你可以随你自己取class名。
-->

使用lazyload肯定要先引用jQuery文件：

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

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

    $(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);
});

以上内容部分参考自下面的文章：
缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
 jQuery Lazy Load 图片延迟加载
 示例