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

延迟加载又称为惰性加载，懒加载，是一种将资源标识为非阻塞（非关键）资源并仅在需要时加载它们的策略,可以缩短页面加载时间，提高Page Speed 分值。

系统核心shared-v(x).min.js 支持以下所有场景的加载方式。

开发建议

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

2.直接图片延迟加载使用loading="lazy"属性方式

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

原生延迟加载

通过img标签默认loading属性可直接实现图像的延迟加载，目前主流浏览器均支持该属性

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

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

Intersection Observer方式延迟加载

图片延迟加载(弃用)

<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" src="lazy.mp4" preload="none" data-poster="lazy.jpg"></video>

视频文件使用preload="none"可在播放时再加载内容

参考文档

延迟加载特性以及对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