我會(huì)創(chuàng)建一個(gè)Image組件來(lái)處理它自己的相關(guān)狀態(tài)。然后在這個(gè)組件內(nèi)，我會(huì)使用IntersectionObserverAPI 來(lái)判斷圖像的容器在用戶瀏覽器上是否可見(jiàn)。
我會(huì)isLoading和isInview狀態(tài)，isLoading將永遠(yuǎn)true直到isInview更新到true.
而當(dāng)isLoadingis時(shí)true，我會(huì)使用nullas 作為src圖像并顯示占位符。
src僅在容器在用戶瀏覽器上可見(jiàn)時(shí)加載。
function Image({ src }) {
const [isLoading, setIsLoading] = useState(true);
const [isInView, setIsInView] = useState(false);
const root = useRef(); // the container
useEffect(() => {
// sets `isInView` to true until root is visible on users browser
const observer = new IntersectionObserver(onIntersection, { threshold: 0 });
observer.observe(root.current);
function onIntersection(entries) {
const { isIntersecting } = entries[0];
if (isIntersecting) { // is in view
observer.disconnect();
}
setIsInView(isIntersecting);
}
}, []);
function onLoad() {
setIsLoading((prev) => !prev);
}
return (
<div
ref={root}
className={`imgWrapper` + (isLoading ? " imgWrapper--isLoading" : "")}
>
<div className="imgLoader" />
<img className="img" src={isInView ? src : null} alt="" onLoad={onLoad} />
</div>
);
}
我還會(huì)有 CSS 樣式來(lái)切換占位符和圖像的display屬性。
.App {
--image-height: 150px;
--image-width: var(--image-height);
}
.imgWrapper {
margin-bottom: 10px;
}
.img {
height: var(--image-height);
width: var(--image-width);
}
.imgLoader {
height: 150px;
width: 150px;
background-color: red;
}
/* container is loading, hide the img */
.imgWrapper--isLoading .img {
display: none;
}
/* container not loading, display img */
.imgWrapper:not(.imgWrapper--isLoading) .img {
display: block;
}
/* container not loading, hide placeholder */
.imgWrapper:not(.imgWrapper--isLoading) .imgLoader {
display: none;
}
現(xiàn)在我的父組件將執(zhí)行對(duì)所有圖像 url 的請(qǐng)求。它也有自己的isLoading狀態(tài)，當(dāng)設(shè)置時(shí)true會(huì)顯示自己的占位符。當(dāng)圖像 url 的請(qǐng)求得到解決時(shí)，我將映射到每個(gè) url 以呈現(xiàn)我的Image組件。
export default function App() {
const [imageUrls, setImageUrls] = useState([]);
const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
fetchImages().then((response) => {
setImageUrls(response);
setIsLoading((prev) => !prev);
});
}, []);
const images = imageUrls.map((url, index) => <Image key={index} src={url} />);
return <div className="App">{isLoading ? "Please wait..." : images}</div>;
}
