Lazyload là gì

Lazy load là gì và có ưu nhược điểm ra sao5 kỹ thuật để thực hiện lazy load ảnh giúp tăng website performance

lazy load(Lười tải, Tải chậm) hiểu nôm na thì nó là việc load dữ liệu khi cần sử dụng đến chúng.Chẳng hạn nhiều người dùng khi vào 1 page còn chẳng kéo xuống hết đến cuối trang để xem toàn bộ nội dung thì ta cần gì load toàn bộ nội dung trước? Việc ta nên làm là người dùng scroll đến đâu ta sẽ load dữ liệu đến đấy

Lazy load là gì và có ưu nhược điểm ra sao

1. Kỹ thuật lazy load là gì? 

Lazy Load là một khái niệm mà ứng dụng trì hoãn việc tải các đối tượng cho đến thời điểm mà người dùng cần nó. Nói một cách đơn giản là tải theo yêu cầu của người dùng chứ không phải tải đối tượng không cần thiết. lazy load là gì

Lợi ích của việc này là giảm thiểu số lượng yêu cầu, giảm thiểu số lượng tài nguyên thừa cần tải cho tới khi người dùng cần đến chúng thực sự.

Bạn đang xem: Lazyload là gì

Hơn nữa kỹ thuật này còn để áp dụng cho việc tải các mã JavaScript từ bên ngoài để tránh dừng tải (blocking download). Về bản chất khi tải mã JavaScript trình duyệt sẽ dừng tất cả các hoạt động tải tài nguyên khác và chờ cho tới khi mã này được tải hoàn thành thì các tiến trình khác mới bắt đầu được tải. Chính vì thế khi phát triển sản phẩm có liên quan đến các hệ thống thứ ba cần cân nhắc sử dụng kỹ thuật tải bất đồng bộ và Lazy Load.

Có thể bạn quan tâm:  Vải thun lạnh là gì

Một ứng dụng phổ biến sử dụng kỹ thuật Lazy Load rất hiệu quả là Facebook. Chúng ta biết khi người dùng cuộn trang đến đâu thì dòng thời gian và ảnh mới tiếp tục tải về cho người dùng.

*
*
*

3. Lozad.Js

Một thay thế nhanh chóng và dễ dàng để thực hiện lazy load ảnh là để cho thư viện JS thực hiện hầu hết công việc cho bạn.

Lozad là một trình lazy loading có hiệu suất cao, nhẹ và có thể config được trong JavaScript thuần mà không cần dependencies. Bạn có thể sử dụng nó để tải hình ảnh, video, iframe và nhiều thứ khác, đồng thời nó cũng sử dụng Intersection Observer API.

Xem thêm: Nhìn Qua Tướng Mặt Quắt Tai Dơi Là Như Thế Nào, Mặt Quắt Tai Dơi

Bạn có thể include Lozad với npm / Yarn và import nó bằng cách sử dụng gói module mà bạn lựa chọn:

npm install –save lozad

yarn add lozad

import lozad from ‘lozad’; lazy load là gì

Ngoài ra, bạn có thể tải xuống thư viện bằng CDN và thêm nó vào cuối trang HTML trong thẻ

Tiếp theo, để triển khai cơ bản, hãy thêm class lozad vào trong thẻ img: img class=”lozad” data-src=”img.jpg”

Cuối cùng, khởi tạo Lozad trong JS của bạn:

const observer = lozad();

observer.observe();

Bạn sẽ tìm thấy tất cả các chi tiết về cách bạn có thể sử dụng thư viện trên Lozad GitHub.

Nếu bạn không muốn đi sâu vào hoạt động của Intersection Observer API hoặc bạn đang tìm cách triển khai nhanh chóng áp dụng cho nhiều loại nội dung khác nhau, Lozad là một lựa chọn tuyệt vời. Nhưng hãy chú ý đến sự hỗ trợ của trình duyệt và cuối cùng tích hợp thư viện này với một polyfill cho Intersection Observer API.

Có thể bạn quan tâm:  Thông Tin Tuyển Sinh Cao Đẳng Cộng Đồng Bà Rịa - Vũng Tàu

4. Lazy loading with blurred image effect

Nếu bạn là một “medium reader”, bạn chắc chắn đã nhận thấy cách trang web tải hình ảnh chính bên trong một bài đăng. Điều đầu tiên bạn thấy là bản sao có độ phân giải thấp, mờ, trong khi phiên bản có độ phân giải cao của nó đang được tải xuống dạng lazy loading.

Ảnh sau khi load xong

Bạn có thể thực hiện lazy loading image với hiệu ứng làm mờ thú vị này theo một số cách. Kỹ thuật yêu thích của tôi là của Craig Buckler. Đây là một số ưu điểm của cách này:

Hiệu suất: chỉ 463 byte CSS và 1,007 byte code JavaScript được rút gọn. lazy load là gìHỗ trợ cho màn hình retina.Dependency-free: không yêu cầu jQuery hoặc các libraries và frameworks.Update dần để phù hợp các trình duyệt cũ hơn và viễ JavaScript không hoạt động. Bạn có thể đọc tất cả về nó trong bài viết How to Build Your Own Progressive Image Loader và download code trên repo GitHub của dự án.

Xem thêm: 10 Cách Làm Mặt Nạ Trị Mụn Giúp Nàng Có Nên Đắp Mặt Nạ Trị Mụn?

5. Yall.Js

Yall là một feature-packed lazy loading dành cho hình ảnh, video và iframe. Cụ thể hơn, nó sử dụng Intersection Observer API và fall back thông minh trong việc handler các sự kiện truyền thống khi cần thiết.

Khi include Yall, bạn cần khởi tạo nó như sau: lazy load là gì

Có thể bạn quan tâm:  Thông Tin Tuyển Sinh Trường Cao Đẳng Nghề Nguyễn Văn Trỗi

Tiếp theo, để lazy load một element img đơn giản, thì tất cả những gì bạn cần làm là:

img class=”lazy” src=”placeholder.jpg” data-src=”image-to-lazy-load.jpg” alt=”Alternative text to describe image.”

Có một số lưu ý:

Bạn thêm class lazy vào elementValue của src là một placeholder imageĐường dẫn đến hình ảnh bạn muốn lazy load nằm bên trong thuộc tính data-srcNhững lợi ích của Yall:

Hiệu suất tuyệt vời với Intersection Observer API

Các tìm kiếm liên quan đến lazy load là gì

lazy loading androidlazy loading jquerylazy loading c#lazy loading reactjslazy load ajaxlazy loading htmllazy loading entity frameworklazy loading react native

Nội dung liên quan

Chuyên mục: kiến thức

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *