如何在GIF完全加载前显示替代图像？站点GIF加载优化咨询

一、实现加载前的轻量占位图（或第一帧） #

方案1：CSS背景图占位 + JS替换 #

1. 先导出GIF的第一帧，保存为体积极小的JPG/PNG（比如vapor-placeholder.jpg、mobile-placeholder.jpg），上传到GitHub仓库对应目录。
2. 修改HTML，给img元素添加背景图样式：

<picture>
  <source srcset="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.gif" type="image/gif" media="(min-width:501px)">
  <source srcset="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/mobile.gif" type="image/gif" media="(max-width:501px)">
  <img src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.gif" 
       alt="outrun gif" 
       class="outrun"
       style="background-image: url('https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor-placeholder.jpg'); background-size: cover; background-position: center;">
</picture>

3. 加入JS监听GIF加载完成，移除背景图：

const outrunImg = document.querySelector('.outrun');
outrunImg.addEventListener('load', () => {
  outrunImg.style.backgroundImage = 'none';
});

用户打开页面时会先看到第一帧占位图，GIF加载完成后自动替换。

方案2：先加载占位图，后台预加载GIF后替换 #

1. 准备好占位图，修改HTML，把GIF地址存到data-*属性里，初始src设为占位图：

<picture>
  <source data-srcset="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.gif" type="image/gif" media="(min-width:501px)">
  <source data-srcset="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/mobile.gif" type="image/gif" media="(max-width:501px)">
  <img src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor-placeholder.jpg" 
       data-src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.gif"
       alt="outrun gif" 
       class="outrun">
</picture>

2. 用JS后台加载GIF，完成后替换真实地址：

// 预加载桌面端和移动端GIF
const preloadSources = () => {
  const sources = document.querySelectorAll('picture source');
  sources.forEach(source => {
    const srcset = source.getAttribute('data-srcset');
    if (srcset) {
      const img = new Image();
      img.srcset = srcset;
      img.onload = () => source.setAttribute('srcset', srcset);
    }
  });

  // 替换主图片地址
  const outrunImg = document.querySelector('.outrun');
  const gifSrc = outrunImg.getAttribute('data-src');
  const img = new Image();
  img.src = gifSrc;
  img.onload = () => outrunImg.src = gifSrc;
};

// 页面加载后执行预加载
window.addEventListener('DOMContentLoaded', preloadSources);

二、其他核心优化方案 #

1. 压缩GIF体积 #

用Gifsicle、Ezgif这类工具压缩GIF：减少不必要的帧数、降低色彩深度、裁剪冗余区域，能把体积压缩到原来的1/3甚至更小，直接解决加载慢的根源。

2. 替换为WebM/MP4视频 #

GIF的压缩效率远低于视频格式，把动画导出为WebM（体积最小）和MP4（兼容Safari），用video标签替代picture，效果和GIF一致但体积大幅减小：

<video autoplay loop muted playsinline class="outrun">
  <source src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.webm" type="video/webm" media="(min-width:501px)">
  <source src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.mp4" type="video/mp4" media="(min-width:501px)">
  <source src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/mobile.webm" type="video/webm" media="(max-width:501px)">
  <source src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/mobile.mp4" type="video/mp4" media="(max-width:501px)">
  <!-- 兼容不支持视频的设备 -->
  <img src="https://media.githubusercontent.com/media/javascripteaser88/fintech-remake/main/media/vapor.gif" alt="outrun gif" class="outrun">
</video>

注意设置muted（浏览器要求自动播放视频必须静音）、playsinline（避免移动端自动全屏）。

3. 优化响应式资源 #

给不同设备提供更匹配的尺寸：比如移动端的mobile.gif可以再做一个更低分辨率的版本，进一步减少加载体积。

4. 利用GitHub Pages缓存 #

确保资源文件名不变时，GitHub Pages会自动缓存资源，用户二次访问直接从本地缓存加载。如果更新图片，记得修改文件名或添加版本参数（比如vapor.gif?v=2）。

内容的提问来源于stack exchange，提问作者ШПИПСИК CHANNEL