高性能纯 JavaScript 懒加载器 Lozad.js

• 授权协议: MIT
• 开发语言: JavaScript
• 操作系统: 跨平台
• 软件首页: https://github.com/ApoorvSaxena/lozad.js
• 软件文档: https://github.com/ApoorvSaxena/lozad.js/blob/master/README.md
• 官方下载: https://github.com/ApoorvSaxena/lozad.js

软件介绍

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();

参考：

• IntersectionObserver options: rootMargin

• IntersectionObserver options: thresholds

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

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

本文地址：https://codercto.com/soft/d/2883.html