图片/视频延迟加载(lazyload)

延迟加载又称为惰性加载，能极大缩短页面加载时间，提升用户体验，关于延迟加载特性以及对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" loading="lazy"/>

目前主流浏览器均可完美支持以上形式，如果浏览不支持loading属性(如Internet Exploer 11)，则会忽略该属性采用直接加载形式不会产生兼容性问题，但loading属性不支持延迟加载背景图片/视频，以及部分浏览器下的iframe内容加载。

二.Intersection Observer方式延迟加载

为解决loading属性带来的部分缺陷问题，系统核心文件shared-v(x).min.js已默认集成 vanilla-lazyload 组件，可直接查看官方说明文档或参考以下使用方法

2.1 图片延迟加载

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

2.2 背景延迟加载

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

2.3 视频延迟加载

<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方式加载