如何在不响应请求的情况下在 li hover 上显示特定图像？答案

【问题标题】：How to display specific img on li hover without get request in react?如何在不响应请求的情况下在 li hover 上显示特定图像？
【发布时间】：2017-11-06 06:11:40
【问题描述】：

我有 4 个盒子（<li> 元素）和 4 张图片。任务是在用户悬停特定框时显示特定图像。如果用户将鼠标悬停在框 0 上，则显示图像 0 如果 1 显示图像 1。

在悬停时，我更新状态 currantBox（例如 currantBox: 1）并将其传递给 img src 属性，如下所示：

<img src={this.props.content[this.props.currantBox]}/>

content 是一个带有 img 路径的 JSON 数组。问题是每次悬停时都会做出反应，即渲染，即状态更新，React 会发出 get 请求来下载图像，这根本没有效率。

实现我的想法或修复当前实现的最佳方式是什么？

【问题讨论】：

除非您设置了一些不正确的缓存标头，否则您的浏览器应缓存获取请求。如果您想摆脱第一次获取时的初始延迟，请使用图像映射（所有图像合二为一）或预加载图像。

标签： javascript html css reactjs

【解决方案1】：

如果不打算更改图像，我会建议完全使用 CSS 解决方案。您可以使用 4 张图像生成精灵，并在悬停时更改 background-position 属性。

【讨论】：

【解决方案2】：

您可以预加载图片：

componentDidMount() {
  let loaded = 0;
  this.allLoaded = false;
  this.props.content.forEach(src => {
    var image = new Image();
    image.onLoad = function() {
      console.log('image is now loaded');
      loaded = loaded + 1;
      if (loaded === this.props.content.length) this.allLoaded = true;
    };
    image.src = src;
  }
}

使用上面的代码，您现在可以在显示任何内容之前检查this.allLoaded。请注意，这是一个简单的实现，并且依赖于永远不会改变的道具。如果预计道具在安装后会发生变化，您可能需要编写一些稍微复杂的代码来解释这一点。但这应该让您了解如何预加载图像。

【讨论】：