Lozad.js高性能纯 JavaScript 懒加载器
Lozad.js 是一款基于 IntersectionObserver API 的高性能、轻量级（〜0.5kb）和可配置的懒加载器，纯 JavaScript ，无依赖，可用于延迟加载图片、iframe 、广告、视频和其他元素。
Usage
在 HTML 中，添加标识符到元素（默认选择器标识为 lozad 类）：
<img class="lozad" 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
评论