简介：TG@luotuoemo
本文由阿里云代理商【聚搜云】撰写
原理
- 延迟加载非关键资源：首屏加载时，只有用户立即可见的图片是关键的，其他位于页面下方、需要用户滚动后才能看到的图片可以延迟加载。这样可以减少初始的网络请求，加快首屏内容的呈现。
- 减少初始带宽占用：通过只加载必要的图片，减少了数据传输量，从而节省了带宽，特别是在移动网络环境下，这对提升用户体验尤为重要。
实现方式
- 使用原生
loading="lazy"属性：现代浏览器支持在<img>标签上设置loading="lazy"属性，这样浏览器会自动延迟加载屏幕外的图片，直到用户滚动到它们附近。 - JavaScript监听滚动事件：通过JavaScript监听用户的滚动事件，判断图片是否进入视口，一旦进入视口则加载图片。这种方法在不支持原生懒加载的浏览器中也能使用。
- 使用Intersection Observer API：相比传统的滚动事件监听，Intersection Observer API提供了更高效、更精确的方式来判断元素是否进入视口，从而触发图片加载。
与其他技术的结合
- CDN加速：将图片资源部署到CDN上，利用CDN的分布式节点，使用户能够从最近的节点获取图片，进一步减少加载时间。
- 图片预加载：对于首屏中确定会使用的图片，可以使用
<link rel="preload">进行预加载，确保它们能尽快被加载和渲染。 - 响应式图片加载：根据设备屏幕大小加载不同尺寸的图片，避免在移动设备上加载过大的图片，从而减少数据传输。
