Lazy Load Lazy được hiểu nôm na chính là việc load dữ liệu khi bạn cần sử dụng đến chúng, hay hiểu một cách đơn giản hơn nó một kỹ thuật cho phép tải các tài nguyên (như hình ảnh, video, các trang web, …) chỉ khi cần thiết. Thay vì tải tất cả các tài nguyên cùng một lúc khi trang web được tải lên, Lazy Load chỉ tải các tài nguyên khi người dùng cuộn trang xuống và cần thiết. Kỹ thuật này giúp tăng tốc độ tải trang và giảm băng thông mạng.
Ưu điểm của Lazy load
Lazy loading là một trong những kỹ thuật tối ưu hiệu xuất của website hiệu quả nhất đang được sử dụng phổ biến hiện nay. Chắc chắn bạn sẽ không bao giờ phải mất chi phí băng thông cho những gì mà bạn không tải xuống, không xem và không nhìn thấy.
Nếu như lưu lượng truy cập là một trong những mối quan tâm lớn nhất của bạn thì Lazy loading sẽ là một sự lựa chọn lí tưởng.
Tốc độ tải trang của bạn cũng sẽ cải thiện một cách đáng kể sau khi áp dụng kỹ thuật lazy load vào website của mình.
Cách Lazy Load ảnh trong React
Ảnh là một phần không thể thiếu trong các trang web hiện đại ngày nay nó có là một yếu tố quan trọng góp phần cho website của chúng ta có thể mang tới thông tin một cách trực quan. Tuy nhiên, các hình ảnh lớn và nhiều có thể gây trì hoãn tải trang, làm giảm trải nghiệm người dùng. Để giảm thiểu tác động này, chúng ta có thể sử dụng kỹ thuật Lazy Load. Trong bài viết này, chúng ta sẽ tìm hiểu cách Lazy Load ảnh trong React JS.
Sử dụng kỹ thuật Intersection Observer
Kỹ thuật Lazy Load có thể được thực hiện bằng nhiều cách, nhưng trong bài viết này, chúng ta sẽ sử dụng kỹ thuật Intersection Observer. Kỹ thuật này sử dụng một API được hỗ trợ sẵn trong các trình duyệt hiện đại để theo dõi vị trí của phần tử trên trang web và xác định khi nào phần tử đó xuất hiện trong tầm nhìn của người dùng, bạn có thể đọc thêm về Observer .
Để sử dụng kỹ thuật Intersection Observer trong React, chúng ta có thể tạo một custom hook:
Dưới đây là đoạn code giúp bạn có thể hiểu được về custom hook
import { <a href="https://nodemy.vn/useeffect-va-cach-su-dung-useeffect-reacthooks/">useEffect</a>, <a href="https://nodemy.vn/doi-chut-ve-usestate-trong-react-hooks/">useState</a> } from 'react';
const useLazyLoadImg = (imgRef) => {
const [isImgLoaded, setIsImgLoaded] = useState(false);
useEffect(() => {
const imgElement = imgRef.current;
if (!imgElement) return;
const observer = new IntersectionObserver(([entry]) => {
if (entry.isIntersecting) {
setIsImgLoaded(true);
observer.unobserve(imgElement);
}
});
observer.observe(imgElement);
return () => {
observer.unobserve(imgElement);
};
}, [imgRef]);
return isImgLoaded;
};
export default useLazyLoadImg;
đôi chút về custom hook
Đầu tiên, chúng ta import useEffect và useState từ React để sử dụng state và side effects trong functional component.
Tiếp theo, chúng ta khai báo một custom hook useLazyLoadImg nhận một tham chiếu đến phần tử img của hình ảnh. Custom hook này sẽ trả về một giá trị boolean isImgLoaded để biết xem hình ảnh đã được load hay chưa.
Trong hook này, chúng ta sử dụng useEffect để tạo một IntersectionObserver để quan sát phần tử img của hình ảnh. Hàm callback của IntersectionObserver được gọi mỗi khi phần tử img nằm trong tầm nhìn của người dùng. Nếu phần tử img đã được quan sát và entry.isIntersecting là true, chúng ta gọi setIsImgLoaded(true) để cập nhật trạng thái là hình ảnh đã được load và gọi observer.unobserve(imgElement) để ngừng quan sát phần tử img. Chúng ta cũng lưu trữ observer trong biến để có thể xóa quan sát khi component unmount.
Cuối cùng, chúng ta trả về giá trị isImgLoaded để sử dụng trong component. Bạn có thể sử dụng custom hook này bằng cách truyền tham chiếu đến phần tử img vào hook, sau đó sử dụng giá trị isImgLoaded để quyết định xem có hiển thị hình ảnh hay không.
