Categories Lazy load Lazysizes

Giới thiệu thư viện lazysizes.js để lazy load ảnh (phần 3)

Bạn có thể xem phần 1 về lazySizes ở đây: kiencang.net/lazysizes-js-lazy-load-anh-p1/

Còn đây là phần 2: kiencang.net/lazysizes-js-lazy-load-anh-p2/

Trình duyệt hỗ trợ

lazysizes hỗ trợ tất cả các trình duyệt mà có hỗ trợ document.getElementsByClassName (= tất cả trình duyệt ngoại trừ IE8). Trong trường hợp bạn cần hỗ trợ IE8, hãy xem tiện ích mở rộng noscript (hoặc sử dụng một mẫu điều chỉnh cho noscript hoặc mẫu LQIP).

Các plugin hỗ trợ

Bạn nên kết hợp (concat) tất cả plugin cùng với lazySizes. Trong trường hợp bạn không concat thì lời khuyên là hãy để các đoạn mã của plugin đứng trước đoạn mã chính của lazySizes.

respimg polyfill plugin

plugin respimg polyfill là cách polyfill (vá víu) thay thế siêu nhẹ cho hầu hết các tập con của ảnh đáp ứng (srcsetpicture).

OPTIMUMX plugin

Thuộc tính srcset với mô tả w và thuộc tính sizes cũng tự động bao gồm các ảnh có DPI cao. Nhưng từng ảnh có mật độ tối ưu điểm ảnh khác nhau, cái có thể thấp hơn (ví dụ 1,5x) so với mật độ điểm ảnh thiết bị của bạn (2x hoặc 3x). Thông tin này trình duyệt không biết được và do vậy không thể thực hiện tối ưu. Tiện ích mở rộng lazySizes optimumx cho bạn nhiều tùy chỉnh để cân bằng trao đổi giữa chất lượng nhận thức (perceived quality) và tốc độ nhận thức (perceived performance).

parent-fit extension

Plugin parent fit mở rộng tính năng data-sizes=”auto” để tính toán chính xác sizes cho phần tử ảnh object-fit: contain | cover và các yếu tố hình ảnh bị hạn chế chiều cao (và chiều rộng) khác nói chung.

object-fit polyfill extension

Plugin object fit polyfill thực hiện nhiệm vụ polyfill thuộc tính object-fit và object-position trong các trình duyệt không được hỗ trợ.

plugin blur up /effect

Plugin blur up / effect cho phép bạn tạo hiệu ứng fade / blur up đẹp mắt với các ảnh LQIP (ảnh giữ chỗ chất lượng thấp), cái sẽ giúp cải thiện trải nghiệm người dùng và hiệu suất, tốc độ nhận thức trong trường hợp bạn sử dụng cách tiếp cận dùng ảnh chất lượng thấp.

extension attrchange / re-initialization (đặc biệt khuyến khích nếu bạn sử dụng Reacr, Angular, vân vân)

Trong trường hợp bạn thay đổi thuộc tính data-src / data-srcset của các phần tử lazy load đã chuyển đổi, bạn phải thêm lại class lazyload vào phần tử.

Tiện ích mở rộng attchange / re-initialization tự động phát hiện thay đổi xảy ra với các thuộc tính data-* và thêm class vào cho bạn.

plugin artdirect

Plugin artdirect cho phép bạn toàn quyền điều khiển art direction thông qua CSS.

Các plugin/tiện ích mở rộng khác

Cũng có các tiện ích/plugin khác trong thư mục plugin để bạn tham khảo. Bạn hãy thoải mái nếu muốn tạo ra một cái mới cho dự án của bản thân.

Mẹo: Chỉ định kích thước hình ảnh (để tối thiểu hóa reflows và tránh hiện tượng nhảy trang)

Bạn có thể tối thiểu hóa ảnh hưởng của reflows, hiện tượng nhảy nội dung hoặc các hành vi không thể dự đoán được trên một số widget JS khác (chẳng hạn isotope, masonry, một số slider/băng chuyền…). Chiều rộng và chiều cao của ảnh phải có khả năng tính toán được bởi trình duyệt trước khi bản thân nguồn ảnh được tải về:

<img
    style="width: 350px; height: 150px;"
	data-srcset="http://placehold.it/350x150 1x,
    http://placehold.it/700x300 2x"
    data-src="http://placehold.it/350x150"
    class="lazyload" />

Với các ảnh phản hồi linh hoạt, kỹ thuật mở rộng tỷ lệ CSS intrinsic phải được sử dụng:

<style>
.ratio-container {
    position: relative;
}
.ratio-container:after {
    content: '';
    display: block;
    height: 0;
    width: 100%;
    /* 16:9 = 56.25% = calc(9 / 16 * 100%) */
    padding-bottom: 42.86%;
}
.ratio-container > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
}
</style>
<div class="ratio-container">
    <img
        data-sizes="auto"
        data-srcset="http://placehold.it/175x75 175w,
        http://placehold.it/350x150 350w,
        http://placehold.it/700x300 700w,
        http://placehold.it/1400x600 1400w"
        data-src="http://placehold.it/700x300"
        class="lazyload" />
</div>

Mẹo: Bạn nên áp dụng lazySizes ở đâu và như thế nào

Dù tính năng lazy load là tính năng rất thú vị, điều quan trọng với người dùng trong việc xem ảnh là nó cần tải càng nhanh càng tốt (hầu hết người dùng bắt đầu tương tác với trang sau khi ảnh trong khung nhìn trình duyệt được tải xong).

Trường hợp thường xảy ra là bạn kết hợp tất cả các đoạn script vào một script lớn và thêm nó vào cuối trang, nhưng bằng việc tách JavaScript thành hai phần sẽ tốt hơn cho tốc độ nhận thức. Trong đó một file nhỏ bao gồm tất cả các mã JavaScript có ảnh hưởng lớn lên nội dung hoặc UI và một file lớn khác bao gồm các mã ảnh hưởng đến hành vi thông thường của trang.

Đoạn mã JavaScript nhỏ này phải bao gồm lazySizes (và tất cả các plugin của nó), nên được đặt trước bất kỳ phần tử chặn hiển thị nào (ví dụ các script) nếu nó ở cuối body hoặc sau bất kỳ phần tử chặn hiển thị nào (ví dụ: script, stylesheets) nếu nó được đặt ở phần head để tải nội dung quan trọng càng nhanh càng tốt (Lưu ý: Cũng có thể có ý nghĩa khi gọi lazySizes.init(); ngay sau lazySizes và tất cả plugin được thêm vào của nó).

Tại sao tôi phát triển lazysizes

Trong quá khứ, tôi thường gặp phải vấn đề khi sử dụng các ứng dụng cho phép lazy load, bởi vì “chức năng kiểm tra chính” được gọi nhiều lần với tần số cao (cách sử dụng trình xử lý sự kiện, xem thêm ở đây: speed.family/lazy-load-anh-va-video/#Lazy_load_anh). Điều đó làm cho nó khó có thể hoàn thành cả hai mục đích là tối ưu cho runtime và sử dụng bộ nhớ hiệu quả. Và khi nhìn sâu vào các đoạn mã nguồn của hầu hết các ứng dụng lazy load bạn cũng thường phát hiện ra các nhà lập trình lười biếng như thế nào (ý là viết mã không được tốt).

Nhưng trong thế giới của các ảnh được tối ưu hóa cho đáp ứng retina và widget JS như băng chuyền hình ảnh hoặc tab (với nhiều ảnh ban đầu bị ẩn), do vậy tải ảnh theo phương thức lazy load ngày càng quan trọng hơn, vì thế mà tôi tạo dự án này.

Back to Top