Lozad.js高性能純 JavaScript 懶加載器

Lozad.js 是一款基于 IntersectionObserver API 的高性能、輕量級（?0.5kb）和可配置的懶加載器，純 JavaScript ，無依賴，可用于延遲加載圖片、iframe 、廣告、視頻和其他元素。

Demo

Usage

在 HTML 中，添加標(biāo)識(shí)符到元素（默認(rèn)選擇器標(biāo)識(shí)為 lozad 類）：

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

然后你需要做的就是實(shí)例化 Lozad ：

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

或使用自定義選項(xiàng)：

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

如果想懶加載動(dòng)態(tài)添加的元素：

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

// ... code to dynamically add elements
observer.observe(); // observes newly added elements as well