在 reactjs 中预渲染来自 URL 的图像
Prerender images from URL in reactjs
是否可以基于 URL 预渲染图像列表,以防止首次使用 React 或 JS 加载到显示器上?
提前致谢。
编辑:我有一个图片轮播,所有图片都一张一张地显示。当一张图片第一次显示时,这张图片需要一些时间来渲染,因为她需要从 url 中获取。如果我第二次展示同一张图片,我不会再等了。然后我想知道是否有解决方案在ComponentDidMount中获取url后直接预加载所有图像即使加载变长。
另一个例子:我有一个图像列表,我想同时显示它们。我怎样才能在结束加载和开始渲染之前预加载它们。
你所说的预渲染不太清楚。
预加载是指组件只在图像准备好时才渲染吗?
如果是这样,您可以这样做:
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
}
}
您只是想提前预加载图像吗?
The article of the Preloading Content 可能会有帮助。
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);
}
是否可以基于 URL 预渲染图像列表,以防止首次使用 React 或 JS 加载到显示器上?
提前致谢。
编辑:我有一个图片轮播,所有图片都一张一张地显示。当一张图片第一次显示时,这张图片需要一些时间来渲染,因为她需要从 url 中获取。如果我第二次展示同一张图片,我不会再等了。然后我想知道是否有解决方案在ComponentDidMount中获取url后直接预加载所有图像即使加载变长。
另一个例子:我有一个图像列表,我想同时显示它们。我怎样才能在结束加载和开始渲染之前预加载它们。
你所说的预渲染不太清楚。
预加载是指组件只在图像准备好时才渲染吗?
如果是这样,您可以这样做:
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
}
}
您只是想提前预加载图像吗?
The article of the Preloading Content 可能会有帮助。
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);
}