【优化】常见优化手段之图片渐进式加载方案

首屏优化是我们在项目优化中最常遇见的一个问题，也常常关乎我们的页面对于目标用户的使用体验感官如何以及页面的跳出率。

可以想象到，用户打开首页经过漫长的等待才出现有价值的内容，那给用户的第一感觉就不好，大多数人可能在页面加载完之前就离开了，所以首屏优化也是我们项目开发中特别需要关注和处理的一件事

首屏优化策略有很多方向，今天介绍其中一种，特别是针对首页图片较多的情形，叫做图片渐进式加载

首先我们需要梳理一下实现步骤及原理：
首页如果图片过多过大，那首页加载势必会出现卡顿白屏等问题，主要原因是请求的资源太多太大导致，那我们是否可以把还未出现在视口的图片先不加载或者使用低分辨率的占位图进行占位
我们可以把img标签定义一个data-src属性用来存储原图资源地址，而src中则放入低分辨率的图片地址

<img class="progressive-image" src="low-resolution.jpg" data-src="high-resolution.jpg" alt="示例图片"
/>

然后通过检查图片是否出现在当前视口内来使用data-src地址替换掉src内的低分辨率资源地址

document.addEventListener("DOMContentLoaded", function() {const images = document.querySelectorAll(".progressive-image");images.forEach(img => {// 检查图片是否在视口中const observer = new IntersectionObserver((entries) => {entries.forEach(entry => {if (entry.isIntersecting) {const img = entry.target;img.src = img.dataset.src; // 替换为高分辨率图observer.unobserve(img); // 停止观察}});}, {rootMargin: "0px 0px 100px 0px", // 提前 100px 加载threshold: 0.01});observer.observe(img);});
});

这样我们就能实现图片的渐进式加载了