Recliner.js 延迟加载图像/iFrames/其他动态 Ajax 内容
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;
}
相关链接
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
上一篇: 五笔速成教程
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论