Gif 多图轮播的 Web 实现：小心踩坑！

2023-11-28 03:15:59

探索 Gif 多图轮播的 Web 实现坑点

乍一看，实现 Gif 多图轮播的思路很简单：当一张 Gif 播放完毕时，触发监听事件，播放下一张，循环往复。然而，问题来了：尽管 Gif 具有「动」的属性，但在 Web 中，它和普通图片并无二致，没有专属的 API 来控制播放、暂停或监听播放结束等事件。这就为我们的思路设置了一道障碍——如何监听 Gif 播放结束？

监听 Gif 播放结束：挑战与解决方案

挑战： 监听 Gif 播放结束

解决方法： 利用 MutationObserver

既然无法直接监听 Gif 播放事件，我们可以采用曲线救国法：利用 MutationObserver。MutationObserver 是一种 JavaScript API，可以监听 DOM 的变化。在 Gif 的情况下，当播放结束时，浏览器会更新图像元素的属性，而 MutationObserver 恰好可以捕捉到这种变化。

代码示例

const gifs = document.querySelectorAll(".gif");

// 创建 MutationObserver，监听属性变化
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (mutation.type === "attributes" && mutation.attributeName === "src") {
      // Gif 播放结束，触发自定义事件
      gif.dispatchEvent(new CustomEvent("gif-ended"));
    }
  });
});

// 对所有 Gif 添加 MutationObserver
gifs.forEach((gif) => {
  observer.observe(gif, { attributes: true });
});

// 监听 Gif 播放结束事件
gifs.forEach((gif) => {
  gif.addEventListener("gif-ended", () => {
    // 播放下一张 Gif
    // ...
  });
});