如何在 Chrome 中使用带有视频海报的“急切”延迟加载?

Ben*_*Ben 5 html lazy-loading html5-video

根据我在 Google 开发者网站上阅读的这篇文章,以及我对我的网站过去工作方式的记忆,延迟加载似乎已成为新的默认设置。这很酷!但是,我正在运行一个人们用来浏览媒体库的网站,并且延迟加载会增加一些视觉卡顿,因此我想在这种情况下禁用它。

我知道我可以添加loading="eager"为标签的属性img,但是,我的网站的工作方式是显示 60xvideo元素的网格,并使用该poster属性显示图像,直到用户hover结束,然后显示超低分辨率视频预览播放。

loading="eager"似乎不适用于video元素的海报。我应该怎么办?

这是我的代码块:

<video loading="eager" class="hoverToPlay" muted loop 
 preload="none" src="../media/?clip=1297&q=q" 
 poster="../media/?clip=1297&q=t"></video>
Run Code Online (Sandbox Code Playgroud)