使用带有下一代图像（如 .webp）的图片源 srcset 的简单翻转效果答案

【问题标题】：Simple rollover effect using picture source srcset with next-gen images like .webp使用带有下一代图像（如 .webp）的图片源 srcset 的简单翻转效果
【发布时间】：2020-06-08 04:13:37
【问题描述】：

更新代码和优化网站速度因此尝试改变这个简单的 html 翻转效果：

<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">

类似这样的事情：

<picture>
<source srcset="img1.webp" type="image/webp" onmouseover="this.src='img2.webp'" onmouseout="this.src='img1.webp'">
<source srcset="img1.jpg" type="image/jpeg"  onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
<img src="img1.jpg" onmouseover="this.src='img2.jpg'" onmouseout="this.src='img1.jpg'">
</picture>

我真的没想到后者会起作用，但我在心理上不知道这个基本效果的正确方法，所以浏览器将访问适当的图像格式。

【问题讨论】：

标签： html image rollover srcset

【解决方案1】：

假设一个人已经在使用 Modernizr js，这是一种使用 CSS 和 HTML 的可能解决方案：

.webp .rollover{
  background:url("/img3/img1.webp")
  }
  
.webp .rollover:hover{
  background:url("/img3/img2.webp")
  }
  
.no-webp .rollover{
  background:url("/img3/img1.jpg")
  }
  
.no-webp .rollover:hover{
  background:url("/img3/img2.jpg")
  }

&lt;div class="rollover"&gt;&lt;/div&gt;

我知道还有其他解决方案，但这个对我有用。

这种方法的一个缺点是在 img2.xxx 加载“onHover”时存在延迟。然而，这也意味着 img2 没有明确地“预加载”，因此加快了整个页面的下载时间。（也可以巧妙地利用这一点）。

【讨论】：