Hướng dẫn thiết lập lazyload cho hình ảnh bằng lazysizes

2020-12-21 1688 lượt xem

Mục lục [ hide ]

Lazy loading là gì?

khi thiết kế web, chúng ta thường gắn hình ảnh ( tag image ) có thuộc tính src trực tiếp nên khi người dùng gõ vào trình duyệt web, hình ảnh sẽ load ngay khi trình duyệt render dom => hiệu xuất web không tốt. Mặt khác, Hình ảnh có thể tiêu tốn rất nhiều băng thông nên để giảm chi phí load chúng ta sẽ hạn chế bằng cách: khi người dùng scroll đến hình ảnh thì mới load ảnh lên.

lợi ích lazyload

giảm chi phí băng thông cho những gì bạn không tải xuống, không xem, không nhìn thấy.
Giải quyết vấn đề vềperformance, khi trình duyệt tải trang, ví dụ bạn có 10 tài nguyên cần tải, lúc này bạn sử dụng lazzayload thì bạn có thể không cần tải hết 10 tài nguyên => tăng trải nghiệm người dùng.

Tác hại

Bạn không nghe nhầm đêu nếu như người dùng mạng chậm, nó phụ thuộc vào việc tải javascript, nên việc không tải kịp javascript của lazyload thì đồng nghĩa với việc không có tài nguyên lazyload nào đc hiện thị.

Cách thực hiện

thêm thư viện lazyload vào thẻ head như sau:

<script async='async' defer='defer' src='https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.1-rc1/lazysizes.min.js'></script>

Chuyển đổi tất cả các thẻ img dạng trỏ thằng src như này

<img src="/đường-dẫn-hình-ảnh-.jpg" alt="">

thay thành

# Các bạn tìm tất cả và sửa src thành data-src
# và thêm src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" class="lazyload" 
<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" data-src="pic.jpg" class="lazyload" alt="">

chủ đề