Tải từng phần hình ảnh ngoài màn hình bằng kích thước tải từng phần

Katie Hempenius

Tải từng phần là phương pháp chờ tải tài nguyên cho đến khi cần thiết, thay vì tải trước. Điều này có thể cải thiện hiệu suất bằng cách giảm lượng tài nguyên cần được tải và phân tích cú pháp trong lần tải trang đầu tiên.

Hình ảnh nằm ngoài màn hình trong lần tải trang ban đầu là lựa chọn lý tưởng cho kỹ thuật này. Hơn hết, lazysize khiến đây trở thành một chiến lược rất đơn giản để triển khai.

Thêm tập lệnh lazysizes vào trang

• Nhấp vào Phối lại để chỉnh sửa để có thể chỉnh sửa dự án.

lazysizes.min.js đã được tải xuống và được thêm vào sự cố này. Cách đưa câu lệnh này vào trang:

• Thêm thẻ <script> sau vào index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

lazysize sẽ tải hình ảnh một cách thông minh khi người dùng cuộn qua trang và ưu tiên những hình ảnh mà người dùng sẽ sớm thấy.

Cho biết hình ảnh sẽ tải từng phần

• Thêm lớp lazyload vào hình ảnh cần tải từng phần. Ngoài ra, hãy thay đổi thuộc tính src thành data-src.

Ví dụ: các thay đổi cho flower3.png sẽ trông giống như sau:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Trong ví dụ này, hãy thử tải từng phần flower3.png, flower4.jpg và flower5.jpg.

Xem ví dụ thực tiễn

Vậy là xong! Để xem những thay đổi này trong thực tế, hãy làm theo các bước sau:

• Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào Toàn màn hình .

• Mở bảng điều khiển rồi tìm những hình ảnh vừa được thêm. Lớp của các lớp này sẽ thay đổi từ lazyload thành lazyloaded khi bạn cuộn trang xuống.

• Xem bảng điều khiển mạng để biết từng tệp hình ảnh tải riêng lẻ khi bạn cuộn xuống trang.

Xác minh bằng Lighthouse

Cuối cùng, bạn nên sử dụng Lighthouse để xác minh những thay đổi này. Kiểm tra hiệu suất "Trì hoãn hình ảnh ngoài màn hình" của Lighthouse sẽ cho biết liệu bạn có quên thêm tính năng tải từng phần vào bất kỳ hình ảnh ngoài màn hình nào hay không.

1. Để xem trước trang web, hãy nhấn vào Xem ứng dụng. Sau đó, nhấn vào Toàn màn hình .
2. Nhấn tổ hợp phím "Control + Shift + J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
3. Nhấp vào thẻ Lighthouse.
4. Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
5. Nhấp vào nút Tạo báo cáo.
6. Xác minh rằng bài kiểm tra Hoãn phát hình ảnh ngoài màn hình đã được thông qua.

Thành công! Bạn đã sử dụng tính năng tải từng phần để tải từng phần hình ảnh trên trang của mình.