html - 在悬停时实现第二张图片的重要因素是什么？

Question

我在列表中实现悬停时的第二张图片。这在产品 ListView 中非常常见。对于如何做到这一点，我有两个想法:

要么像这样把两张图片放在一起

<div class="wrapper">
  <img src="1.jpg" />
  <img src="2.jpg" />
<div>

然后隐藏一张图片，当鼠标悬停在 wrapper 上时，我会用 css 显示它。

或者我会制作一个 div:

<div class="container" />

然后使用内联CSS在.container上设置背景图片。

当然，我也可以用 javascript 做一些事情。

如果有的话，这些解决方案将如何影响悬停性能和页面加载时间？有更好的解决方案吗？该网站是在 React 中构建的。

Answer 1

由于您使用的是 React，因此您可以通过状态简单地管理第二张图像的可见性。 但是，如果您只有两张图片并且不需要任何类型的图片循环，那么使用 css 应该是性能最佳的解决方案。

像这样使用您当前的设置:

<div class="wrapper">
  <img src="1.jpg" />
  <img src="2.jpg" />
<div>

然后将第一张图片放在第二张图片之上。然后在悬停时隐藏第一个元素。

这对性能/加载时间的唯一影响是，您会在页面加载时为每个元素获取两个图像。 相反，如果使用 React，第二张图片将不会被加载，直到您将其渲染到 DOM 中(但如果图片需要一些时间来加载，它看起来就不会那么流畅)。 然而，原生 css 转换比用 react 解决这个问题要高效得多。至少对于这个小用例。

但是，如果您想通过 React 解决它，我建议您尝试使用您的 backgroundImage 方法。只需跟踪组件中的悬停状态并相应地切换背景图像即可。