Lozad.js 正在参加 2021 年度 OSC 中国开源项目评选,请投票支持!
Lozad.js 在 2021 年度 OSC 中国开源项目评选 中已获得 {{ projectVoteCount }} 票,请投票支持!
2021 年度 OSC 中国开源项目评选 正在火热进行中,快来投票支持你喜欢的开源项目!
2021 年度 OSC 中国开源项目评选 >>> 中场回顾
Lozad.js 获得 2021 年度 OSC 中国开源项目评选「最佳人气项目」 !
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
开源组织
地区 不详
投 递 者 王练
适用人群 未知
收录时间 2017-09-20

软件简介

Lozad.js 是一款基于 IntersectionObserver API 的高性能、轻量级(〜0.5kb)和可配置的懒加载器,纯 JavaScript ,无依赖,可用于延迟加载图片、iframe 、广告、视频和其他元素。

Demo

Usage

在 HTML 中,添加标识符到元素(默认选择器标识为 lozad 类):

<img class="lozad" data-src="image.png" />

然后你需要做的就是实例化 Lozad :

const observer = lozad(); // lazy loads elements with default selector as '.lozad'
observer.observe();

或使用自定义选项:

const observer = lozad('.lozad', {
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1 // ratio of element convergence
});
observer.observe();

参考:

亦或者你想给定制功能定义加载元素:

lozad('.lozad', {
    load: function(el) {
        console.log('loading element');

        // Custom implementation to load an element
        // e.g. el.src = el.dataset.src;
    }
});

如果想懒加载动态添加的元素:

const observer = lozad();
observer.observe();

// ... code to dynamically add elements
observer.observe(); // observes newly added elements as well
展开阅读全文

代码

的 Gitee 指数为
超过 的项目

评论 (9)

加载中
mark
2018/01/09 10:11
回复
举报
mark
2017/11/17 10:49
回复
举报
打分: 力荐
mark,感觉自己有点后知后觉啊,每次看到感觉还不错的东西都是几年前,几个月前
2017/11/14 13:44
回复
举报
mark
2017/09/21 17:22
回复
举报
mark
2017/09/21 16:53
回复
举报
打分: 力荐
mk
2017/09/21 14:50
回复
举报
mark
2017/09/21 13:24
回复
举报
打分: 还行
做了一个 预览所有缩略图再选择大图查看的照片库【 http://haitaosite.cn/ip?u=/photoset/fishtank/ 和 http://haitaosite.cn/ip?u=/photoset/suzhou/ 】,因为一下子加载所有缩略图影响效率也浪费,一直在找滞后加载的方便机制(无须改动太多)。 前几天不得不把缩略图的显示改为分页了,今天看到这个了。。。
2017/09/21 12:54
回复
举报
mark
2017/09/21 11:58
回复
举报
更多评论
暂无内容
暂无内容
暂无内容
9 评论
222 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部