Recliner.js 延迟加载图像/iFrames/其他动态 Ajax 内容

Question

Recliner.js 是一个超级轻量级 jQuery 插件，压缩后只有 1KB，用于延迟加载图像、iFrames 和 其他动态 Ajax 内容。懒加载从来没有这么好的感觉。

当我们的客户之一在他们的一个媒体大移动新闻网站上带着巨大的滚动滞后来到我们的时候，这个脚本就诞生了。结果发现 lazy-load-xt 是罪魁祸首，所以我们自然地测试了其他懒加载脚本，但是其中并没有符合我们的简单标准：

• 轻量级
• 在元素上设置有状态的 CSS 类。
• 为自定义行为重写事件回调的能力
• 可装任何动态内容，图像、iframes 和 ajax
• 移动友好
• 打印机友好

Recliner.js 目前使用在一些非常高的交通站点，所以它是很好的测试和生产准备。

安装

如果你用 bower 然后键入：

bower install recliner

或者如果你喜欢用 npm 然后继续输入：

npm install jquery-recliner

否则，只需下载 recliner.min.js 并将其放入资源文件夹中即可。

使用

将 jQuery 2.x 或 1.x 和 Recline 添加到 HTML 源代码中：

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="recliner.min.js"></script>

将元素上的 Recline 绑定到 .lazy Class 上：

$(".lazy").recliner({
    attrib: "data-src", // selector for attribute containing the media src
    throttle: 300,      // millisecond interval at which to process events
    threshold: 100,     // scroll distance from element before its loaded
    printable: true,    // be printer friendly and show all elements on document print
    live: true          // auto bind lazy loading to ajax loaded elements
});

还可以通过编程触发更新，以检查要加载的新元素：

$(window).trigger("lazyupdate");

Recliner.js 可用于加载范围不同的动态内容。

图片

注：显式地指定图像尺寸是个好主意，这样页面的高度就不会因为懒惰的内容被加载到 DOM 中而变得疯狂。

<img src="some-placeholder-image.png" data-src="image-to-lazy-load.png" class="lazy" width="333" height="333" />

框架

<iframe data-src="http://sourcey.com" width="333" height="333" class="lazy" frameborder="0" vspace="0" hspace="0"></iframe>

Ajax

<div data-src="http://sourcey.com" class="lazy" style="width:333px;height:333px">
    Loading, be patient damnit!
</div>

回调 API

Recliner.js 程序公开了一个简单的基于事件的 API，这样您就可以使用回调实现您自己的自定义行为：

lazyload

这个 lazyload 事件将在将要加载的元素上触发。

$(document).on('lazyload', '.lazy', function() {
    var $e = $(this);
    // do something with the element to be loaded...
    console.log('lazyload', $e);
});

lazyshow

这个 lazyshow 事件将在元素加载后触发。

$(document).on('lazyshow', '.lazy', function() {
    var $e = $(this);
    // do something with the loaded element...
    console.log('lazyshow', $e);
});

样式与动画

Recliner.js 将在元素上设置以下有状态 CSS 类：

• lazy-loading* 在加载元素时设置
• lazy-loaded* 在元素加载后设置

使用有状态类，您可以在图像中添加一些花哨的转换：

img {
  opacity: 0;
  transition: opacity .333s ease-in;
}

img.lazy-loaded {
  opacity: 1;
}

相关链接

• 在线实例：http://sourcey.com/recliner
• github 地址：https://github.com/sourcey/recliner