类似领英使用预览图预加载图片以提升性能的实现方案咨询

你需要的效果属于通用型低质量占位符（LQIP）的简化实现，相比为每张图生成模糊缩略占位的方案，通用SVG/纯色占位不需要额外的预处理步骤，非常适合信息流类场景使用。

无依赖原生实现方案（性能最优，无需引入jQuery） #

HTML结构 #

直接将通用占位SVG内联到src属性，不需要额外HTTP请求，实际图片地址存放在data-src自定义属性中：

<img 
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Crect width='100%25' height='100%25' fill='%23f0f2f5'/%3E%3C/svg%3E"
  data-src="你的实际图片URL"
  alt="图片描述文本"
  class="lazy-img"
>

你可以修改SVG的fill属性值调整占位色，或者自定义SVG内容添加站点专属的占位标识。

CSS样式 #

添加过渡效果实现图片加载后的淡入，避免切换生硬：

/* 提前定义图片宽高比，避免加载后触发布局偏移 */
.lazy-img {
  width: 100%;
  aspect-ratio: 4/3; /* 根据你的图片实际比例调整 */
  object-fit: cover;
  transition: opacity 0.25s ease;
}
.lazy-img.loading {
  opacity: 0;
}

JS逻辑 #

用IntersectionObserver实现懒加载监听，性能远高于传统滚动监听，提前200px预加载让用户无感知：

document.addEventListener('DOMContentLoaded', () => {
  const lazyImages = document.querySelectorAll('.lazy-img');
  const imgObserver = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const targetImg = entry.target;
        const realSrc = targetImg.dataset.src;
        // 预加载实际图片，加载完成后再替换src避免跳转
        const tempLoader = new Image();
        tempLoader.src = realSrc;
        tempLoader.onload = () => {
          targetImg.classList.add('loading');
          setTimeout(() => {
            targetImg.src = realSrc;
            targetImg.classList.remove('loading');
            imgObserver.unobserve(targetImg);
          }, 100);
        }
      }
    })
  }, {
    rootMargin: '200px 0px', // 可视区外200px就开始预加载
    threshold: 0.1
  });

  lazyImages.forEach(img => imgObserver.observe(img));
})

Core Web Vitals 适配说明 #

这个方案完全符合Core Web Vitals的最优要求，正确配置下得分会比直接加载所有图片的方案更高：

• LCP（最大内容绘制）：注意不要对首屏的LCP元素（通常是首屏最大的图片）使用懒加载，直接填写实际src即可，非首屏图片用这个方案可以减少初始带宽占用，提升LCP加载速度
• CLS（累积布局偏移）：只要提前给图片设置好aspect-ratio或者用padding方案固定占位尺寸，完全不会触发布局偏移
• INP（交互到下一步绘制）：IntersectionObserver属于异步API，不会占用主线程资源，不会影响交互响应速度

现代浏览器极简实现（无需额外JS代码） #

如果不需要兼容2019年之前发布的旧版本浏览器，可以直接用原生loading="lazy"属性实现，逻辑更简单：

<img 
  src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'%3E%3Crect width='100%25' height='100%25' fill='%23f0f2f5'/%3E%3C/svg%3E"
  data-src="你的实际图片URL"
  alt="图片描述"
  loading="lazy"
  onload="if(this.dataset.src) {this.src = this.dataset.src; delete this.dataset.src}"
>

内容的提问来源于stack exchange，提问作者Nick