> For the complete documentation index, see [llms.txt](https://javascriptuse.gitbook.io/javascript/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://javascriptuse.gitbook.io/javascript/huong-dan-nau-mon-lazy-loading-image-theo-chuan-5-sao-google.md).
# Hướng dẫn nấu món "Lazy loading image" theo chuẩn 5 sao Google
## Hướng dẫn nấu món "Lazy loading image" theo chuẩn 5 sao Google
[Trending](https://viblo.asia/trending) [JavaScript](https://viblo.asia/tags/javascript)[React](https://viblo.asia/tags/react)
## Hướng dẫn nấu món "Lazy loading image" theo chuẩn 5 sao Google
Mỵ là một người con gái nết na thùy mị. Vào ngày Tết cuối năm, bạn trai mời Mỵ sang ra mắt bố mẹ chồng. Đây, cơ hội ngàn năm có một, ngày mà Mỵ đã chờ bấy lâu nay, đây là dịp để cô trổ hết tài công dung ngôn hạnh mà đã mất bao tiền của thời gian luyện tập và chuẩn bị. Đề thi mẹ chồng cho nàng dâu như sau "Con hãy làm món lazy load image cho bộ sưu tập của mẹ nhé!". Lúc bấy giờ Mỵ mới giật thót, bấy lâu nay toàn học chế biến những sơn hào hải vị, nhưng giờ gặp món ăn dân giã như này phải làm sao. Quen mà lạ!
Nào giờ ta hãy cùng giúp Mỵ hoàn thành món ăn này một cách xuất sắc nhé.
### Bước 1: Chuẩn bị nguyên liệu
* Để giữ bài toán ở mức đơn giản, ở đây mình sẽ tạo ra một danh sách, bên trong là các thẻ img. Nguồn dữ liệu mình sẽ lẩy từ API của [unsplash.com](http://unsplash.com/).
* API sẽ có thể lấy theo page. Mỗi page sẽ trả về 10 ảnh. Mỗi một bức ảnh thì sẽ có các kích thước như thumbnail, small, medium, large.
### Bước 2: Sơ chế
* Là một thư viện ảnh, có nhiều cách để trưng bày chúng. Ở đây mình lựa chọn là một vertical list, ảnh sẽ xếp lần lượt từ trên xuống dưới. Cuộn xuống gần đáy trang, ảnh sẽ được load thêm cho đến mãi mãi
```
function App() {
const [images, setImages] = useState([])
const [page, setPage] = useState(1)
useEffect(() => {
APIFetchImages({ page, setImages })
}, [page])
useEffect(() => {
document.addEventListener('scroll', throttle(() => {
if ((window.innerHeight + window.scrollY + OFFSET_HEIGHT) >= document.body.offsetHeight) {
setPage(data => data + 1)
}
}, 300))
return () => document.removeEventListener('scroll')
}, [])
return (
{images.map((image, i) => (
))}
)
}
```
* Ở đây mình đã làm những điều như sau
* Khi vào trang, gọi đến API unsplash và kéo ảnh về, sau đó set vào list
* Mỗi khi user cuộn xuống gần đáy trang, update trang page hiện tại lên 1 đơn vị
* Thấy sự thay đổi về trang API sẽ được gọi lại và tiếp tục đẩy vào danh sách
* Hàm scroll được thottle, một khi đã được gọi thì sẽ phải chờ ít nhất 300ms tiếp theo thì mới có thể được gọi
* Event listener sẽ được release khi out khỏi page
* Với phần infiinty scroll, nhìn chung như thế đã là ổn
### Bước 3: Chế biến
* Trước khi bước vào công đoạn chính, ta sẽ điểm qua một vài vẫn đề trước. Vậy tại sao phải cần lazy load ở đây
* Không ai muốn phải chờ đợi. Một user khi vào một trang web sẽ luôn muốn mình có thể xem được các nội dung một cách nhanh nhất. Mà thứ tốn thời gian tải của trang web nhất lại thường là các tài nguyên media.
* Nếu các hình ảnh ở phía dưới, user không có cơ hội hay nhu cầu xem ảnh, cơ sao bắt họ phải tải xuống hết rồi mới cho xem nội dung
* Không dùng đến mà mình vẫn yều cầu server trả response về thì là lãng phí tài nguyên server
* Để có thể biến món ăn, ta có 3 cách như sau:
#### Cách 1: sử dụng `Intersection Observer API`
* Đây là một API có sẵn của WebAPI, giúp bạn có thể đặt một callback mỗi khi mà có một element nào đó đi vào viewport màn hình hay một vùng nào đó bạn quy định. Nhờ vào cơ chế này, bạn có thể để một callback cho các hình ảnh sẽ được load khi chúng được user cuộn và xuất hiện trên màn hình.
```
const lazyImageObserver = new IntersectionObserver(function (entries) {
entries.forEach(function (entry) {
if (entry.isIntersecting) {
const lazyImage = entry.target
lazyImage.src = lazyImage.dataset.src
lazyImage.classList.remove('lazy')
lazyImageObserver.unobserve(lazyImage)
}
})
})
```
* IntersectionObserver có thể lắng nghe được nhiều element cùng một lúc
* Mỗi khi một element vào viewport thì chúng sẽ được update data-src vào src và bỏ observe của chúng đi
* Ở mỗi image sẽ nhận prop `lazyImageObserver` trên và gắn observe tương ứng.
```
function Image({ src, lazyImageObserver, id }) {
const imageElement = useRef(null)
useEffect(() => {
lazyImageObserver.observe(imageElement.current)
}, [lazyImageObserver])
return (
)
}
```
* Đây là một API không phải trình duyệt nào cũng hỗ trợ, chính vì thế bạn sẽ có thể cần dùng đến polyfill hay sử dụng các cách khác phía bên dưới
#### Cách 2: sử dụng event scroll
* Đây là cách rất thông thuộc với các bạn và có thể support trên mọi trình duyệt rồi
* Ta sẽ add một event mỗi khi user `scroll`. Lúc đó các image sẽ được check xem đã được vào viewport chưa và load hình ảnh
```
lazyImages.forEach(function (lazyImage) {
if ((lazyImage.getBoundingClientRect().top <= window.innerHeight
&& lazyImage.getBoundingClientRect().bottom >= 0)) {
lazyImage.src = lazyImage.dataset.src
lazyImage.classList.remove('lazy')
}
})
```
* Khác với cách trên, cách này sẽ phải cận thận để check với đủ các case `scroll` `resize` `orientationchange` để tránh bị mẹ chồng bắt BUG nhé
#### Cách 3: sử dụng css background
* Trong khi với hầu hết các trường hợp, ta sẽ sử dụng thẻ `img` để có thể show ra ảnh. Mình còn có một cách khác đó là dùng đến thuộc tính `background-image`.
* Không giống với cách hoạt động của `img` là luôn được load và hiện thị cho dù có được xem thấy hay không, `background-image` hoạt động một cách đặc biệt hơn. Khi document và CSS object modal đã được build, browser lúc đó mới apply các CSS đó trước rồi mới quyết định gọi đến các request bên ngoài. Chính vì vậy để link ảnh vào thuộc tính `background-image` có thể tăng tốc first loading cho user.
* Cùng kết hợp với 2 cách trên, ta có thể ra được một phong cách lazy load khác tương tự
```
.lazy-background {
background-image: url("hero-placeholder.jpg"); /* Placeholder image */
}
.lazy-background.visible {
background-image: url("hero.jpg"); /* The final image */
}
```
#### Cách 4: Đặt ship mang cho
* Đúng như cách gọi của nó, ở cách này hầu như bạn chẳng phải làm gì cả, chỉ cần nằm và tận hưởng
* Ở version Chrome76, Google đã giới thiệu một hàm native mới support hoàn toàn những công việc này. Bạn có thể enable và trải nghiệm tính năng này khi nhập dòng này vào URL `chrome://flags/#enable-lazy-image-loading`
* Cụ thể bạn có thể đọc và tìm hiểu thêm ở đây nhé
### Bước 4: Trang trí
* Đây chính là công đoạn cuối cùng cho tác phầm này rồi. Từ bước này trở đi, bạn có thể thoải mái và sáng tạo sao cho hợp mắt.
* Với mỗi mình image, mình có thể tạo một place holder hiệu ứng loading chẳng hạn Hy vọng với các hướng dẫn step by step như trên, Mỵ đã có thể ghi điểm tuyệt đối trong mắt mẹ chồng. Nếu không được hoàn hảo, hoàng tử kia cũng sẽ tha thứ cho người con gái đã cố gắng nỗ lực hết mình rồi.
#### `References`
*
*
*
*
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://javascriptuse.gitbook.io/javascript/huong-dan-nau-mon-lazy-loading-image-theo-chuan-5-sao-google.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
))}