Cpp五条

这个屌丝很懒，什么也没留下！

热门标签

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

作者：Cpp五条 | 2024-02-20 21:09:49

踩

lazy load 1.9.3

最近使用 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,
  });

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

1, threshold: 默认值 0

threshold: 值为数字, 用于设置提前开始加载高度. 如设置为200, 表示滚动条在离目标位置还有 200 的高度时就开始加载图片, 可以做到不让用户察觉.

2, failure_limit : 默认值 0

failure_limit: 值为数字, 同 failurelimit(下文介绍)

3, event: 默认值 "scroll"

event: 用于设置触发加载的时机. 值有scroll(滚动), click(点击), mouseover(鼠标划过), sporty(运动的), foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…

4, effect: 默认值 "show"

effect: 用于设置显示图片是的动画效果. 值有: show(直接显示), fadeIn(淡入), slideDown(下拉)等

5, container: 默认值 window

container: 值为某容器, 用于设置对某容器中的图片实现效果. lazyload默认在拉动浏览器滚动条时生效, 这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片

6, data_attribute: 默认值 "original"

data_attribute: 用于设置 lazyload 操作的自定义属性(data-后面的属性名)

7, skip_invisible: 默认值 true

skip_invisible: 设置是否加载不可见的图片.

Lazy Load 插件默认对隐藏的图片不加载(例如 display:none ). 这样做有助于性能的优化. 如果希望连隐藏的图片一起加载,则可以把 skip_invisible 设为 false .

8, appear: 默认值 null

appear: 用于在图片加载之前到显示图片之间的处理函数，一般用于展示加载动画.

9, load: 默认值 null

load: 用于图片加载完毕之后执行的函数.

10, placeholder: 默认值 "data:image/png;base64,iV......"

placeholder: 用于设置占位图片.

值为某一图片路径. 此图片用来占据将要加载的图片的位置, 待图片加载时, 占位图则会隐藏

接下来的两个是兼容低版本的属性, 在该版本中正常使用.

11, effectspeed : 毫秒数

effectspeed: 用于控制动画的速度.

属性默认是空的, 所以如果不设置它, 动画的时间为400毫秒.

12, failurelimit: 值为数字. 在图片布局混乱时使用.

Lazy Load 有一个循环查找 img 的机制. 根据 HTML 文档的布局从上往下查找, 当找到第一个并未显示/加载的 img 时, 就会停止往下查找.(其实就是对 $("img.lazy") 这个对象(组)进行顺序查找)

那这个 failure_limit 的属性有什么用呢?

现在网站设计时, 都会用到大量的定位样式, 如: float 和 position , 这样在浏览器呈现的布局效果和 HTML 文档中的 DOM 顺序有很大差异.

这样就会存在一种情况, 某 <img> 标签已出现在屏幕上,但它却无法显示(因为按顺序加载的话, 还没排到它)!!

当Lazy Load 在找到第一个未显示的 <img> 标签时, 查找已经被终止了, 并没有继续往下遍历.

当设置了 failure_limit 属性之后, Lazy Load 会查找到对应个数未显示的 <img> 标签处.

当在图片多且布局复杂的页面时, failure_limit 的作用就很大了.

原文还温馨提示: If you have a funky layout set this number to something high. 如果你的网站布局很"变态",建议把该值调得更高.

在这里获取本章源码.

本章结束。

如果文章对你有帮助，碰巧想请我喝杯咖啡，可以点击这里。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Cpp五条/article/detail/120903