在 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);
}