jquery.lazyload-1.9.3中文文档 -- 延迟加载图片的jQuery插件

最新推荐文章于 2024-08-23 08:48:02 发布

Leo_DLi

最新推荐文章于 2024-08-23 08:48:02 发布

阅读量1.3k

点赞数 1

分类专栏： Web前端文章标签： jquery lazyload

本文链接：https://blog.csdn.net/Leo_DLi/article/details/112315506

版权

Web前端专栏收录该内容

18 篇文章 1 订阅

订阅专栏

最近使用 jquery.lazyload.js 这个jQuery插件的时候, 突然发现对这个插件相对全面的介绍不多.

特别是对lazyload()方法中的配置选项的介绍少之又少.

随即整理一份供大家参阅.

说明: 我使用的版本是1.9.3

废话不多少, 直接上代码:

一, 使用小Demo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <style>
    #container {
      width: 765px;
      margin: auto;
    }
    #container img {
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="container">
    <img class="lazy" data-original="./image/img1.jpg" alt="">
    <img class="lazy" data-original="./image/img2.jpg" alt="">
    <img class="lazy" data-original="./image/img3.jpg" alt="">
    <img class="lazy" data-original="./image/img4.jpg" alt="">
    <img class="lazy" data-original="./image/img5.jpg" alt="">
    <img class="lazy" data-original="./image/img6.jpg" alt="">
  </div>
</body>
<script src="./js/jquery-1.11.0.min.js"></script>
<script src="./js/jquery.lazyload.js"></script>
<script>

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

</script>
</html>

下方有完整代码链接.

上述Demo中仅用到了 lazyload 配置选项中的 effect 属性, 接下来介绍下该版本提供的所有属性和具体用法.

首先, 先来一张代码截图:

lazyload配置属性展示截图

对应代码如下:

  $('img.lazy').lazyload({
    // threshold: 提前开始加载高度.
    threshold: 200,
    // failure_limit: 同 failurelimit
    failure_limit: 10,
    // event: 设置何种事件触发时才加载, 默认 scroll
    event: 'click',
    // effect: 使用何种载入效果
    effect: "fadeIn",
    // container: 对某容器中的图片实现效果
    container: $("#container"),
    // data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)
    data_attribute : "attr",
    // skip_invisible: 是否 不加载不可见图片. true 不加载, false 加载.
    skip_invisible : false,
    // appear: 用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画.
    appear: function() {},
    // load: 用于图片加载完毕之后执行的函数.
    load: function() {},
    // placeholder: 设置占位图片路径
    placeholder : "img/lazy.gif",
    // failurelimit: 一次加载图片的张数(图片排序混乱时使用)
    failurelimit : 10,
    // effectspeed: 设置动画持续时长, 单位毫秒
    effectspeed : 1000,
  });

从中可一目了然的看到所有可配置属性. 接下来逐个介绍对应属性.