使用图片源srcset与下一代图片（如.webp）进行简单的翻转效果。

Question

更新代码，优化网站速度，所以想把这个简单的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>

我并不指望后者能起作用，但对于这种基本效果的正确做法，我在心理上已经被堵死了，所以浏览器会访问适当的图片格式。

Answer 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")
  }

<div class="rollover"></div>

我知道还有其他的解决方案，但这个对我来说是可行的。

这种方法的一个缺点是，当img2.xxx被加载 "onHover "时，会有一个滞后。 然而，这也意味着img2并没有被明确地 "预加载"，因此加快了整个页面的下载时间。 (我们也可以对此进行细化)。