在 reactjs 中从 URL 预渲染图像答案

【问题标题】：Prerender images from URL in reactjs在 reactjs 中从 URL 预渲染图像
【发布时间】：2020-05-28 22:55:42
【问题描述】：

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

提前致谢。

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

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

【问题讨论】：

标签： javascript reactjs image url loading

【解决方案1】：

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

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

【讨论】：

【解决方案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
  }
}

【讨论】：

我已经尝试过这样的事情，但这在我的情况下不起作用，但我还是会重试。我编辑了我的帖子以使其更加清晰，并举了两个我的例子。