JavaScript实现hover切换GIF时如何防止画面闪烁

闪烁原因 #

• 原有逻辑每次鼠标移入/移出才动态赋值GIF地址，浏览器临时发起资源请求、解码图片的过程中会出现短暂的背景空白
• 直接替换单张background-image属性时，旧背景会被立刻清除，新图未渲染完成就会出现闪烁
• 每次请求拼接的时间戳参数导致浏览器无法缓存GIF资源，每次切换都要重新拉取，进一步加重闪烁问题

修复方案 #

提前预加载所有GIF资源，用双背景层叠切换代替直接替换单张背景，从根源消除加载空窗：

• 页面初始化阶段就把hover态、移出态的两张GIF提前加载进浏览器缓存，避免触发事件时才临时加载
• 用伪元素分别承载两张动态GIF，切换时只调整伪元素透明度，不直接替换元素本身的背景，避免旧背景被瞬间清空
• 仅在触发交互时给GIF地址追加时间戳，保证每次触发GIF都从头播放，不影响初始预加载逻辑

完整修复代码 #

HTML部分（和原有结构一致无需修改） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="link">
  <div id="link-gif">&nbsp;</div>
</div>

CSS部分 #

#link-gif {
  position: relative;
  width: 150px;
  height: 40px;
  border: 1px solid #39464E;
  /* 初始静态图 */
  background-image: url('http://i.imgur.com/YgLJoVH.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  cursor: pointer;
}
/* 两个伪元素分别承载hover、移出状态的GIF，默认透明不显示 */
#link-gif::before,
#link-gif::after {
  content: '';
  position: absolute;
  inset: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom center;
  opacity: 0;
  /* 不需要淡入效果可以删掉下一行的过渡属性 */
  transition: opacity 0.1s ease;
  pointer-events: none;
}
#link-gif::before {
  background-image: var(--hover-bg, url('http://i.imgur.com/HhsBws5.gif'));
}
#link-gif::after {
  background-image: var(--leave-bg, url('http://i.imgur.com/WLFzz3S.gif'));
}
/* hover时显示正向GIF */
#link-gif:hover::before {
  opacity: 1;
}
/* 鼠标移出时显示反向GIF */
#link-gif.leave-play::after {
  opacity: 1;
}

JS部分 #

$(function() {
  const $linkGif = $("#link-gif");
  // 初始化阶段预加载两张GIF
  const gifList = [
    'http://i.imgur.com/HhsBws5.gif',
    'http://i.imgur.com/WLFzz3S.gif'
  ];
  gifList.forEach(src => {
    const tempImg = new Image();
    tempImg.src = src;
  });

  $linkGif.hover(function() {
    // 移入时清除移出状态，给正向GIF加时间戳强制从头播放
    $(this).removeClass('leave-play');
    const hoverGif = "url('http://i.imgur.com/HhsBws5.gif?time=" + new Date().getTime() + "')";
    $(this).css('--hover-bg', hoverGif);
  }, function() {
    // 移出时给反向GIF加时间戳从头播放
    const leaveGif = "url('http://i.imgur.com/WLFzz3S.gif?time=" + new Date().getTime() + "')";
    $(this).css('--leave-bg', leaveGif).addClass('leave-play');
    // 延时时间和反向GIF的总时长保持一致，播放完成后回到静态初始状态
    setTimeout(() => {
      $(this).removeClass('leave-play');
    }, 1000);
  });
});

补充说明 #

• 代码里的setTimeout延时可以根据你实际使用的GIF时长调整，确保反向动画播放完成后再切回静态图
• 如果不需要淡入淡出的过渡效果，直接删掉CSS里的transition: opacity 0.1s ease;即可，因为资源已经提前缓存，就算瞬间切换透明度也不会出现闪烁
• 这个方案兼容所有支持CSS伪元素的主流浏览器，不需要额外依赖其他库

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