图片&视频延迟加载 (Lazyload)

最后更新: | 浏览次数: 725|开发文档

延迟加载又称为惰性加载，懒加载，是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略,可以缩短页面加载时间，延迟加载特性以及对Google Page speed的相关知识，请参考以下第三方权威链接：

Google web.dev：https://web.dev/i18n/zh/lazy-loading-images/

mdn web doc lazyload: https://developer.mozilla.org/zh-CN/docs/Web/Performance/Lazy_loading

原生延迟加载

通过html默认的loading属性可直接实现图像的延迟加载，目前主流浏览器均完美兼容

<img src="image.jpg" alt="" loading="lazy"/>

loading属性不支持背景图片/视频的延迟加载，以及部分浏览器下的iframe内容加载。

Intersection Observer方式延迟加载

为解决loading属性无法实现背景，视频等延迟加载的问题，系统核心文件shared-v(x).min.js已集成支持多种场景的加载方式，示例代码如下

图片延迟加载

<img alt="A lazy image" width="800" height="400" class="lazy" data-src="lazy.jpg" />

除非考虑兼容性，不建议使用此方法，采用浏览器原生延迟加载方式

背景延迟加载

<div class="lazy" data-bg="lazy.jpg"></div>

视频延迟加载

<video class="lazy" controls width="620" data-src="lazy.mp4" data-poster="lazy.jpg">
  <source type="video/mp4" data-src="lazy.mp4" />
</video>

注意事项与建议

1.首屏视口内默认可见的图片或视频不推荐采用任何形式的延迟加载(会引发LCP问题)

2.直接图片加载建议采用loading="lazy"属性方式

2.非直接图片(如背景图，视频，视频封面)资源建议采用Intersection Observer方式加载

文档