我有一个包含大量图像的网站。起初，我以低质量显示它们以节省访问者的带宽。如果您将鼠标悬停在图像上，则该图像应替换为相同大小的高质量图像。我的网站在没有 jQuery 的情况下运行。
我尝试onmouseover了srcset标签和img标签，但这仅img在浏览器不avif支持时才对标签有效：
<picture>
<source onmouseover="this.srcset='test.avif'" loading="lazy" data-srcset="lq.avif" type="image/avif" srcset="lq.avif">
<img onmouseover="this.src='test.jpg'" loading="lazy" src="lq.jpg`" data-src="lq.jpg">
</picture>
如何防止图像在加载 hq 图像时立即更改并显示空帧？