更新代码并优化网站速度,因此尝试更改此简单的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>
我并不是真的希望后者能起作用,但是我对于实现此基本效果的正确方法心存疑虑,因此浏览器将访问适当的图像格式。
假设一个人已经在使用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没有明确地“预加载”,因此加快了整个页面的下载时间。(一个人也可以解决这个问题)。
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句