在 reactjs 中预渲染来自 URL 的图像

Question

是否可以基于 URL 预渲染图像列表以防止使用 react 或 JS 首次加载显示？

提前谢谢。

编辑：我有一个图像轮播，所有图像都一一显示。首次显示图像时，此图像需要一些时间才能呈现，因为需要从 url 获取。如果我第二次显示相同的图像，我不会等待。然后我想知道是否有解决方案可以在 ComponentDidMount 中获取 url 后直接预加载所有图像，即使加载时间变长。

另一个例子：我有一个图像列表，我想同时显示它们。如何在结束加载并开始渲染之前将它们全部预加载。

Answer 1

您只是想提前预加载图像吗？

预加载内容的文章可能会有所帮助。

componentDidMount() {
const imageUrlList = ['a.jpg', 'b.jpg', 'c.jpg'];
this.preloadImages(imageUrlList);
}

preloadImages(urlList) {
let fragment = document.createDocumentFragment(); 
for (let i = 0; i < urlList.length; i++) {
const imgUrl = urlList[i];
const linkEl = document.createElement('link');
linkEl.setAttribute('rel', 'preload');
linkEl.setAttribute('href', imgUrl);
linkEl.setAttribute('as', 'image');
fragment.appendChild(linkEl);
}
document.head.appendChild(fragment);
}

Answer 2

从预渲染的意思来看不太清楚。

预加载是指您希望组件仅在图像准备就绪时呈现吗？

如果是这样，您可以执行以下操作：

componentDidMount() {
const img = new Image();
img.src = Newman; // by setting an src, you trigger browser download
img.onload = () => {
// when it finishes loading, update the component state
this.setState({ imageIsReady: true });
}
}
render() {
const { imageIsReady } = this.state;
if (!imageIsReady) {
return <div>Loading image...</div>; // or just return null if you want nothing to be rendered.
} else {
return <img src={Newman} /> // along with your error message here
}
}