Highly Performant, Light ~1kb & Configurable Lazy Loader in Pure JS

Lozad.js

Highly performant, light and configurable lazy loader in pure JS with no dependencies for images, iframes and more, using IntersectionObserver API

Lozad.js :

• lazy loads elements performantly using pure JavaScript,
• is a light-weight library, just minified & gzipped,
• has NO DEPENDENCIES 🙂
• allows lazy loading of dynamically added elements as well,
• supports , , iframes, videos, audios, responsive images, background images and multiple background images etc.
• even supports LQIP (Low Quality Image Placeholder)
• is completely free and open source.
• it will reload when the valid attributes change.

It is written with an aim to lazy load images, iframes, ads, videos or any other element using the recently added Intersection Observer API and MutationObserver with tremendous performance benefits.

Featured in:

• Web | Google Developers
• Product Hunt
• Reddit
• CSS Tricks
• David Walsh
• Codrops
• SitePoint

Yet another Lazy Loading JavaScript library, why?

Existing lazy loading libraries hook up to the scroll event or use a periodic timer and call getBoundingClientRect() on elements that need to be lazy loaded. This approach, however, is painfully slow as each call to getBoundingClientRect() forces the browser to re-layout the entire page and will introduce considerable jank to your website.

Making this more efficient and performant is what IntersectionObserver is designed for, and it’s landed in Chrome 51. IntersectionObservers let you know when an observed element enters or exits the browser’s viewport.

Install

# You can install lozad with npm
$ npm install --save lozad

# Alternatively you can use Yarn
$ yarn add lozad

# Another option is to use Bower
$ bower install lozad

Thank you!
Sau đó, với một trình gộp module như Rollup hoặc Webpack, sử dụng như bất kỳ thứ gì khác:

// using ES6 modules
import lozad from 'lozad'

// using CommonJS modules
var lozad = require('lozad')

Hoặc tải qua CDN và bao gồm trong thẻ head của trang của bạn.

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

Khi tải từ CDN, bạn có thể tìm thấy thư viện trên window.lozad.

Sử dụng

Trong HTML, thêm một bộ nhận dạng cho phần tử (bộ chọn mặc định được xác định là lớp lozad):

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

Bây giờ bạn chỉ cần khởi tạo Lozad như sau:

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

hoặc với một tham chiếu Element DOM:

const el = document.querySelector('img');
const observer = lozad(el); // passing a `NodeList` (e.g. `document.querySelectorAll()`) is also valid
observer.observe();

hoặc với tùy chọn tùy chỉnh:

const observer = lozad('.lozad', {
    rootMargin: '10px 0px', // syntax similar to that of CSS Margin
    threshold: 0.1, // ratio of element convergence
    enableAutoReload: true // it will reload the new image when validating attributes changes
});
observer.observe();

Tham khảo:

• IntersectionObserver options: rootMargin
• IntersectionObserver options: thresholds

hoặc nếu bạn muốn định nghĩa hàm tùy chỉnh cho việc tải phần tử:

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

        // Custom implementation to load an element
        // e.g. el.src = el.getAttribute('data-src');
    }
});

Nếu bạn muốn mở rộng trạng thái loaded của các phần tử, bạn có thể thêm tùy chọn loaded:

Lưu ý : Thuộc tính "data-loaded"="true" được Lozad sử dụng để xác định xem một phần tử đã được tải trước đó hay chưa.

lozad('.lozad', {
    loaded: function(el) {
        // Custom implementation on a loaded element
        el.classList.add('loaded');
    }
});

Nếu bạn muốn tải phần tử động:

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

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

để sử dụng với hình ảnh phản hồi

<!-- responsive image example -->
<img class="lozad" data-src="image.png" data-srcset="image.png 1000w, image-2x.png 2000w">

để sử dụng với hình ảnh nền

<!-- background image example -->
<div class="lozad" data-background-image="image.png">
</div>

để sử dụng với nhiều hình ảnh nền

<!-- multiple background image example -->
<div class="lozad" data-background-image="path/to/first/image,path/to/second/image,path/to/third/image">
</div>

để sử dụng với hình ảnh nền phản hồi (image-set)

<!-- responsive background image-set example -->
<div class="lozad" data-background-image-set="url('photo.jpg') 1x, url('photo@2x.jpg') 2x">
</div>

Để thay đổi dấu phân cách chia các hình ảnh nền:

<!-- custom delimiter for background images example -->
<div
  class="lozad"
  data-background-image="/first/custom,image,path/image.png-/second/custom,image,path/image.png"
  data-background-delimiter="-"
>
</div>

Nếu bạn muốn tải hình ảnh trước khi chúng xuất hiện:

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

const coolImage = document.querySelector('.image-to-load-first');
// ... trigger the load of a image before it appears on the viewport
observer.triggerLoad(coolImage);

Cải thiện hình ảnh lớn

Đôi khi việc tải hình ảnh mất thời gian. Trong trường hợp này, bạn có thể thêm một hình nền thay thế:

<img class="lozad" data-placeholder-background="red" data-src="image.png">

Lozad đặt một màu nền tạm thời cho phần tử hình ảnh và người dùng sẽ thấy phần thay thế cho đến khi hình ảnh tải xong.

Ví dụ với thẻ hình ảnh (picture)

Tạo cấu trúc phần tử hình ảnh (picture) bị hỏng.

Trình duyệt IE không hỗ trợ thẻ hình ảnh (picture)! Bạn cần đặt thuộc tính data-iesrc (chỉ dành cho các thẻ hình ảnh của bạn) với nguồn cho trình duyệt IE

Thuộc tính data-alt có thể được thêm vào thẻ hình ảnh (picture) để sử dụng trong thuộc tính alt của hình ảnh được tải chậm

<!-- For an element to be caught, add a block type that is different from the inline and some min-height for correct caught into view -->
<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
    <!-- NO img element -->
    <!-- instead of img element, there will be the last source with the minimum dimensions -->
    <!-- for disabled JS you can set <noscript><img src="images/thumbs/04.jpg" alt=""></noscript> -->
</picture>

Khi lozad tải phần tử hình ảnh này, nó sẽ sửa lỗi cho nó.

Nếu bạn muốn sử dụng hình nền thay thế (như hình nền hình ảnh chất lượng thấp), bạn có thể đặt một thẻ img tạm thời bên trong thẻ picture của bạn. Nó sẽ bị loại bỏ khi lozad tải phần tử hình ảnh.

<picture class="lozad" style="display: block; min-height: 1rem" data-iesrc="images/thumbs/04.jpg" data-alt="">
    <source srcset="images/thumbs/04.jpg" media="(min-width: 1280px)">
    <source srcset="images/thumbs/05.jpg" media="(min-width: 980px)">
    <source srcset="images/thumbs/06.jpg" media="(min-width: 320px)">
    <!-- you can define a low quality image placeholder that will be removed when the picture is loaded -->
    <img src="data:image/jpeg;base64,/some_lqip_in_base_64==">
</picture>

Ví dụ với video

<video class="lozad" data-poster="images/backgrounds/video-poster.jpeg">
    <source data-src="video/mov_bbb.mp4" type="video/mp4">
    <source data-src="video/mov_bbb.ogg" type="video/ogg">
</video>

Ví dụ với iframe

<iframe data-src="embed.html" class="lozad"></iframe>

Đó là tất cả, chỉ cần thêm lớp lozad.

Ví dụ về việc chuyển đổi lớp (class)

<div data-toggle-class="active" class="lozad">
    <!-- content -->
</div>

Lớp active sẽ được chuyển đổi trên phần tử khi nó vào khung nhìn của trình duyệt.

Hỗ trợ trình duyệt

Có sẵn trong latest browsers. Nếu không có hỗ trợ trình duyệt, hãy sử dụng polyfill.

Đối với hỗ trợ IE11, vui lòng sử dụng các polyfills này.

Câu hỏi thường gặp (FAQs)

Kiểm tra FAQ Wiki để biết một số vấn đề phổ biến cần lưu ý khi sử dụng lozad.js

Đóng góp

Có quan tâm đóng góp tính năng và sửa lỗi không?

Đọc thêm về việc đóng góp.

Lịch sử thay đổi (Changelog)

Xem Changelog

Chi tiết Tải về:

Tác giả: ApoorvSaxena
Mã nguồn: https://github.com/ApoorvSaxena/lozad.js
Giấy phép: MIT license