我在翻译这篇Sora的技术报告的时候,发现一个网页得有一百多个视频,如果打开网页就很卡,因为video标签没有lazy load功能。要么preload设置为none,默认不下载视频,但是就什么也不显示了,看不出来啥视频。如果preload设置为auto,那么就意味着加载网页的时候,会去请求所有网页中的视频,这会导致网页很卡顿,并且很费流量。
我的博客是基于 https://t.co/6j9CI7y3oH 搭建的,博客内容支持Markdown和HTML还有React,所以我做了一点优化,默认设置所有视频的preload为none,然后增加了网页可见区域的检测,如果当前可见区域有视频,就将相应的视频的preload属性设置为auto,这样就只会加载可见区域内的视频,网页不会卡顿,加载速度也会更快更省流量。
代码见截图,前端同学应该不陌生。
点击图片查看原图