图片加载完成后替换占位图的最佳实现方法（优化谷歌静态地图LCP）

你写的imgLoaded判断逻辑本身是正确的，始终返回false基本是踩了以下几个坑：

• 只在页面初始化时单次调用判断：此时谷歌静态地图还在请求过程中，complete属性为false，后续没有持续追踪加载状态，自然拿不到加载完成的结果
• 首屏直接渲染了真实地图：页面初始HTML里就把谷歌地图地址写在了img的src属性上，浏览器解析DOM时会立刻发起地图请求，占位图根本没机会优先展示，甚至你的判断逻辑还没执行，图片已经开始加载了
• 没有绑定原生加载事件：只靠轮询/单次读取img属性判断状态，很容易因为JS执行时序、浏览器缓存等问题错过加载完成的时机
• 没做异常兜底：如果地图资源因为网络、配置等问题加载失败，naturalHeight会始终为0，没有错误处理逻辑就会一直卡在占位状态。

核心思路很简单：首屏先渲染和真实地图尺寸完全一致的占位图，快速完成首屏绘制压低LCP数值，等DOM就绪后再发起真实地图请求，加载完成后平滑替换占位图，全程不引发布局偏移。

代码实现 #

首先是首屏HTML结构，注意初始状态不要给真实地图img设置src：

<!-- 固定宽高的地图容器，从根源避免布局偏移 -->
<div class="map-wrap" style="width: 100%; aspect-ratio: 4/3; position: relative;">
  <!-- 占位图，首屏直接渲染，推荐用压缩到10KB以内的低清模糊图/纯色块/骨架屏 -->
  <img 
    class="map-placeholder" 
    src="/local-assets/map-placeholder.webp" 
    alt="地图加载中"
    style="width: 100%; height: 100%; object-fit: cover;"
  >
  <!-- 真实地图节点，初始隐藏，加载完成后淡入显示 -->
  <img 
    class="map-real" 
    alt="位置地图"
    style="width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; opacity: 0; transition: opacity .25s ease;"
  >
</div>

然后是JS逻辑，注意一定要先绑定加载监听，再设置真实图片的src，避免请求过快漏过事件：

// 兼容全场景的图片加载监听方法
function onImgReady(imgEl, onSuccess, onError) {
  // 先判断如果图片已经加载完成（比如缓存命中的场景），直接执行成功回调
  if (imgEl.complete && imgEl.naturalHeight > 0) {
    onSuccess();
    return;
  }
  // 绑定加载成功事件，once:true保证只触发一次
  imgEl.addEventListener('load', onSuccess, { once: true });
  // 绑定加载失败事件
  if (onError) {
    imgEl.addEventListener('error', onError, { once: true });
  }
}

// 等DOM解析完成就开始加载真实地图
document.addEventListener('DOMContentLoaded', () => {
  const realMap = document.querySelector('.map-real');
  const placeholder = document.querySelector('.map-placeholder');
  // 替换为你自己的谷歌静态地图请求地址
  const realMapUrl = '你的谷歌静态地图完整请求地址';

  onImgReady(
    realMap,
    () => {
      // 加载完成：淡入真实地图，等动画结束后移除占位图减少节点
      realMap.style.opacity = '1';
      setTimeout(() => placeholder.remove(), 260);
    },
    () => {
      // 加载失败兜底：可以展示重试按钮、失败提示，这里简单保留占位图
      placeholder.alt = '地图加载失败，请稍后重试';
    }
  );

  // 最后一步设置src，发起真实地图请求
  realMap.src = realMapUrl;
});

优化注意事项 #

• 占位图体积一定要压到最小，首屏能在几十毫秒内渲染完成，LCP才会记录占位图的绘制时间，达到优化效果
• 真实地图img不要加loading="lazy"属性，否则浏览器会推迟资源加载时机，反而拖慢用户看到完整地图的时间
• 容器必须固定宽高，不要靠图片内容撑开高度，否则替换时会触发页面重排，拉高CLS指标
• 如果你的谷歌静态地图请求需要携带签名密钥，不要把密钥直接写在前端，最好通过自己的服务端做一层代理转发，避免密钥泄露，还能顺便做资源缓存提升加载速度

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