Thư viện lazysizes là một trong những công cụ phổ biến và mạnh mẽ nhất để triển khai Lazy Loading cho hình ảnh, video và iframe trên các trang web. lazysizes không chỉ giúp giảm thời gian tải trang mà còn tương thích tốt với nhiều trình duyệt và không đòi hỏi nhiều cấu hình phức tạp.
Dưới đây là các bước cụ thể để sử dụng lazysizes trong dự án của bạn:
Bước 1: Cài đặt lazysizes
Bạn có thể thêm lazysizes vào dự án của mình thông qua CDN hoặc tải trực tiếp về và lưu trong dự án.
Sử dụng CDN:
Thêm đoạn mã sau vào phần <head> của HTML:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/lazysizes.min.js" async></script>
Tải về và sử dụng cục bộ:
Tải lazysizes từ GitHub hoặc npm và thêm vào dự án của bạn.
<script src="/path-to-your-js/lazysizes.min.js" async></script>
Bước 2: Sử dụng lazysizes với các thẻ hình ảnh
Để sử dụng lazysizes, bạn cần cập nhật các thẻ <img> của mình với một số thuộc tính đặc biệt.
Cấu hình cơ bản:
Đổi thuộc tính src thành data-src và thêm lớp lazyload vào thẻ <img>:
<img
data-src="example.jpg"
class="lazyload"
alt="Example Image"
>
Cấu hình cho nhiều kích thước ảnh (responsive images):
Nếu bạn đang sử dụng các thuộc tính srcset hoặc sizes để hiển thị các kích thước ảnh khác nhau tùy thuộc vào màn hình, bạn cũng có thể sử dụng lazysizes để trì hoãn việc tải các ảnh này:
<img
data-src="example.jpg"
data-srcset="example-small.jpg 480w, example-medium.jpg 768w, example-large.jpg 1200w"
data-sizes="auto"
class="lazyload"
alt="Example Image"
>
Trong trường hợp này, lazysizes sẽ tự động chọn kích thước ảnh phù hợp dựa trên kích thước viewport của thiết bị.
Bước 3: Kiểm tra và tinh chỉnh
Sau khi cấu hình, hãy kiểm tra trang web của bạn trên các trình duyệt khác nhau để đảm bảo Lazy Loading hoạt động chính xác. Đảm bảo rằng hình ảnh chỉ tải khi cuộn đến chúng và không có lỗi hoặc ảnh bị mất khi cuộn.
Các tùy chọn và plugin nâng cao
Thư viện lazysizes có nhiều plugin đi kèm và các tùy chọn cấu hình nâng cao để đáp ứng nhu cầu cụ thể của từng dự án:
- Rias plugin: Tự động xử lý các hình ảnh responsive với
srcset. - Bgset plugin: Lazy load hình nền (background images) sử dụng
data-bgset. - Object-fit plugin: Đảm bảo hỗ trợ tốt cho thuộc tính
object-fit.
Ví dụ với bgset plugin:
Nếu bạn muốn Lazy Loading cho hình nền:
<div
class="lazyload"
data-bgset="example-small.jpg 480w, example-medium.jpg 768w, example-large.jpg 1200w"
style="background-image: url('placeholder.jpg');"
></div>
Trong trường hợp này, bạn cần tải plugin bgset của lazysizes:
<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.3.2/plugins/bgset/ls.bgset.min.js" async></script>
Kết luận
Sử dụng lazysizes là một cách hiệu quả và dễ dàng để tối ưu hóa tốc độ tải trang web của bạn thông qua Lazy Loading hình ảnh. Với các bước đơn giản ở trên, bạn có thể tích hợp lazysizes vào dự án và tinh chỉnh theo nhu cầu cụ thể của mình. Đây là một công cụ mạnh mẽ giúp cải thiện hiệu suất trang web và nâng cao trải nghiệm người dùng.
ZALO