Làm thế nào để tải lười biếng hoạt động?
Một hình ảnh HTML bình thường trông như thế này:
<img src="sample.jpg" width="100%"/>Các plugin tải chậm sẽ viết lại mã như thế này:
<img data-src="sample.jpg" width="100%"/>Như bạn đã nhận thấy,srcthuộc tính đã được thay đổi thànhdata-src.
Bởi vì khôngsrc, trình duyệt ban đầu không tải hình ảnh này. Sau đó, một đoạn mã JavaScript nhỏ sẽ kiểm tra xem hình ảnh có ở trong khung nhìn (khung nhìn của người dùng) hay không và nếu nó ở bên trong,data-srctrở lại điều đósrctrình duyệt nào kích hoạt tải xuống và hiển thị hình ảnh.
Tải bản gốc lười biếng là gì?
Chrome đi kèm với tính năng "tải lười gốc". Bạn có thể đọc nó ở đây.
Native lazy loading có ưu điểm là không cần JavaScript và nói chung là nhanh hơn nhiều vì trình duyệt thực hiện nó "nguyên bản".
Đoạn mã trông như thế này:
<img src="sample.jpg" loading="lazy" width="100%"/>Hình ảnh bay là gì?
Flying Images là một plugin tải lười hiệu suất cao. Nó sử dụng tính năng tải chậm "bản địa" của trình duyệt nếu có, nếu không, hãy sử dụng JavaScript thông thường để tải chậm.
Hình ảnh bay cũng có thể tải hình ảnh trước khi hình ảnh xuất hiện trong khung nhìn.
Bạn có sợ lười tải vì nó ảnh hưởng đến trải nghiệm người dùng?
Hình ảnh bay khác với các plugin tải lười biếng khác như thế nào?
- Sử dụng tính năng tải chậm được tích hợp sẵn - sử dụng tính năng tải chậm tích hợp sẵn nếu có (hiện chỉ được hỗ trợ trong Chrome), nếu không, hãy sử dụng JavaScript để tải hình ảnh lười biếng.
- Tải hình ảnh trước khi vào chế độ xem - trong khi các plugin khác tải hình ảnh khi chúng ở "bên trong" khung nhìn, thì các hình ảnh bay tải chúng khi chúng chuẩn bị vào khung nhìn.
- JavaScript nhỏ - chỉ 0,5 KB, nén, giảm.
- Nếu muốn, bạn chỉ có thể sử dụng bản địa chỉ - chỉ muốn hỗ trợ Chrome? Bạn có thể chuyển sang "chỉ riêng", không chèn JavaScript.
- Viết lại tất cả mã HTML - không bao giờ bỏ lỡ hình ảnh do tải chậm (ngay cả khi nó được bổ sung bởi các plugin thư viện).
- Chất độn trong suốt - một base64 nhỏ trong suốt được thêm vào tất cả các hình ảnh. Không còn nhấp nháy khi tải hình ảnh.
- Loại trừ các từ khóa - Hầu hết tất cả các plugin tải lười biếng đều cung cấp tính năng loại trừ, tuy nhiên hình ảnh bay cũng có thể loại trừ hình ảnh khỏi nút mẹ của hình ảnh. Hữu ích nếu hình ảnh của bạn không có tên lớp.
- Hỗ trợ các trình duyệt bị tắt IE và JavaScript - tất cả hình ảnh được tải ngay lập tức nếu đó là Internet Explorer hoặc ngay cả khi JavaScript bị tắt hoàn toàn (sử dụng
noscriptnhãn).
