如何延迟HTML页面中GIF图片播放，直至用户滚动到该图片？

嘿，这个需求我之前帮不少人解决过，给你两个实用的方案，你可以根据自己的场景选：

方案一：静态占位图切换法（适合追求简单、节省带宽的场景） #

思路是一开始用GIF的第一帧静态图占位，当用户滚动到该区域时，再把静态图替换成真实的GIF地址，这样页面加载时不会自动播放GIF，只有进入视口才会加载并播放。

代码实现： #

HTML

<!-- 用静态图作为初始显示，data-gif 属性存储真实GIF的地址 -->
<img class="lazy-gif" src="gif-first-frame.jpg" data-gif="your-animation.gif" alt="动态内容">

JavaScript

// 获取所有需要延迟加载的GIF元素
const lazyGifs = document.querySelectorAll('.lazy-gif');

// 检查元素是否进入视口的函数
function checkGifVisibility() {
  lazyGifs.forEach(gif => {
    const rect = gif.getBoundingClientRect();
    // 判断元素是否处于可视范围内（这里的逻辑是元素至少有一部分进入视口就触发）
    const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;

    if (isInViewport && !gif.classList.contains('loaded')) {
      // 替换为真实GIF地址
      gif.src = gif.dataset.gif;
      // 添加标记，避免重复替换
      gif.classList.add('loaded');
    }
  });
}

// 监听滚动事件和页面加载完成事件
window.addEventListener('scroll', checkGifVisibility);
window.addEventListener('load', checkGifVisibility);
// 页面加载完成后先检查一次，防止元素一开始就在视口内
checkGifVisibility();

小提示：

• 静态图要和GIF的第一帧完全一致，这样切换时不会有突兀的视觉变化；
• 如果担心滚动事件触发太频繁影响性能，可以给checkGifVisibility加个节流函数，减少执行频率：

// 节流函数，控制事件触发间隔
function throttle(func, delay = 150) {
  let lastExecTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastExecTime >= delay) {
      lastExecTime = now;
      func.apply(this, args);
    }
  };
}

// 用节流后的函数监听滚动
window.addEventListener('scroll', throttle(checkGifVisibility));

方案二：用Video元素替代GIF（适合需要精准控制播放/暂停、追求性能的场景） #

GIF本身很难直接控制暂停/播放，但把GIF转换成MP4（体积更小、性能更好）后，用原生video元素就能轻松控制播放状态。当元素进入视口时播放，离开时暂停，体验更流畅。

代码实现： #

HTML

<!-- poster 属性设置静态占位图，和方案一的静态图作用一致 -->
<video class="gif-video" loop muted playsinline poster="gif-first-frame.jpg">
  <source src="your-animation.mp4" type="video/mp4">
  <!-- 降级方案：如果浏览器不支持video，显示原始GIF -->
  <img src="your-animation.gif" alt="动态内容">
</video>

注意：muted属性是必须的，因为现代浏览器要求视频静音才能自动播放；playsinline是为了在移动端避免视频自动全屏。

JavaScript

const gifVideos = document.querySelectorAll('.gif-video');

// 控制视频播放/暂停的函数
function handleVideoPlayback() {
  gifVideos.forEach(video => {
    const rect = video.getBoundingClientRect();
    const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;

    if (isInViewport) {
      // 进入视口则播放，用catch处理可能的播放权限问题
      video.play().catch(err => console.log('播放失败:', err));
    } else {
      // 离开视口则暂停
      video.pause();
    }
  });
}

// 监听滚动和页面加载事件，同样可以加节流优化
window.addEventListener('scroll', throttle(handleVideoPlayback));
window.addEventListener('load', handleVideoPlayback);
handleVideoPlayback();

小提示：

• 可以用免费的本地或在线工具把GIF转换成MP4，MP4的体积通常只有GIF的1/10左右，加载更快；
• 可以额外添加WebM格式的视频源，提升兼容性和加载速度。

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