Lazy load là chiến lược trong đó người ta chỉ tải các tài nguyên mà người dùng cần, chứ không tải tất cả trước trong lượt tải đầu tiên. Cách tiếp cận này giải phóng cho các tài nguyên chưa cần thiết trong lần tải đầu tiên (initial page load) và tránh phải tải một số tài nguyên mà có thể người dùng sẽ không bao giờ sử dụng đến. Các ảnh ở dưới màn hình đầu tiên (offscreen*) trong lần tải đầu tiên là ứng cử viên lý tưởng để áp dụng kỹ thuật này. Thư viện có chất …

Đọc thêm

Bạn đọc có thể tham khảo phần 1 về thư viện lazysizes ở đây. JS API lazysizes tự động nhận diện các phần tử mới với class lazyload, vì thế bạn không cần thực hiện lời gọi hoặc cấu hình bất cứ điều gì trong phần lớn trường hợp. JS API – các tùy chọn Các tùy chọn có thể được thiết lập bằng cách sử dụng tùy chọn cấu hình toàn cục qua khai báo bằng đối tượng có tên lazySizesConfig. Đối tượng này phải được định nghĩa trước đoạn mã của lazysizes. Dưới đây là ví dụ căn …

Đọc thêm

Vài lời của người dịch: Nhờ bài viết về cách lazy load ảnh và video (có nội dung rất căn bản) tôi biết đến công cụ lazysizes.js (của tác giả có nickname aFarkas), nó được khen ngợi nhiều (rất hay được nhắc tên trong các tài liệu hướng dẫn tăng tốc của Google), do đó tôi quyết định đầu tư thời gian tìm hiểu. Vì bài khá dài nên được chia làm ba phần. Một lần nữa thì bài viết dạng này chỉ dành cho những ai muốn đào sâu về lazy load và có ý muốn triển khai trên …

Đọc thêm

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 …

Đọc thêm