问题描述
我正在显示其来源来自 URL 的图像。这些图像具有不同的大小。这些图像位于 A
0.0 0.1
1.0 [1.0,1.1]
2.0 [1.0,0.55]
2.6 [1.0,0.4230769230769231]
3.0 0.1
3.4 [0.1,0.3235294117647059]
4.0 1
4.5 2.1
中,它们具有响应性,并且为了使图像尽可能适合,它们的宽度为 100%。到目前为止,一切都很好。
问题是当加载图像时,因为它来自一个 URL,它可能需要一段时间,在加载它占用 0x0 像素之前,因此我的 div
不可见,这导致我显示问题,直到图像已加载。 (你明白我的意思吗?)
事实上,最好的方法是拥有一个与要加载的图像大小相同的占位符。或者我想知道获取图像的大小然后构建div
会更好吗? (但如何在渲染中做到这一点?)或者,我应该使用延迟加载组件吗? (目前,我还没有找到一个可以在加载图像之前获取图像大小的图像)。
解决方法
这样的事情应该可以工作:html and body
export default function App() {
const [isLoading,setIsLoading] = useState(true);
function onLoad() {
// delay for demo only
setTimeout(() => setIsLoading(false),1000);
// setIsLoading(false)
}
return (
<>
<img
alt="ad-img"
width={300}
src="https://via.placeholder.com/300x200/FF0000"
style={{ display: isLoading ? "block" : "none" }}
/>
<img
alt="ad-img"
width={300}
src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcS1hIjBaj0A0XNB_xAozRAcFs6Gr0DQhWTGiQ&usqp=CAU"
style={{ display: isLoading ? "none" : "block" }}
onLoad={onLoad}
/>
</>
);
}
...我们正在显示 2 个图像,占位符和实际图像。在加载实际图像时,我们将显示占位符,加载后我们将隐藏占位符并显示实际图像。