使用CodePen代码后GIF无法加载，寻求问题排查帮助

核心问题分析 #

你遇到的问题主要来自三个方面：缺失必要的依赖库、CSS语法不兼容、JS执行时机错误，下面逐一给出修复步骤：

1. 必须引入SuperGif库 #

原CodePen项目默认加载了SuperGif这个处理GIF的核心库，但你本地代码没加，导致new SuperGif()根本无法运行，GIF自然没法被解析渲染。

修复： 在HTML的<head>里加一行CDN引入：

<script src="https://cdn.jsdelivr.net/npm/supergif@0.1.12/dist/jsgif.min.js"></script>

2. 把Sass语法转成标准CSS #

你的CSS用了&嵌套选择器（比如.gifcontrol &:after），这是Sass的专属语法，普通浏览器不认，得拆成标准CSS写法。

替换后的imgGif.css：

img.gif {
  visibility: hidden;
}

.jsgif {
  position: relative;
}

.gifcontrol {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transition: background 0.25s ease-in-out;
  z-index: 100;
}

.gifcontrol:after {
  transition: background 0.25s ease-in-out;
  position: absolute;
  content: "";
  display: block;
  left: calc(50% - 25px);
  top: calc(50% - 25px);
}

.gifcontrol.loading {
  background: rgba(255, 255, 255, 0.75);
}

.gifcontrol.loading:after {
  background: #ff9900;
  width: 50px;
  height: 50px;
  border-radius: 50px;
}

.gifcontrol.playing:after {
  opacity: 0;
  transition: opacity 0.25s ease-in-out;
  border-left: 20px solid #ff9900;
  border-right: 20px solid #ff9900;
  width: 50px;
  height: 50px;
  box-sizing: border-box;
}

.gifcontrol.playing:hover:after {
  opacity: 1;
}

.gifcontrol.paused {
  background: rgba(255, 255, 255, 0.1);
}

.gifcontrol.paused:after {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 25px 0 25px 50px;
  border-color: transparent transparent transparent #ff9900;
}

3. 调整JS执行时机 #

你把JS放在<head>里，此时页面的img元素还没渲染出来，document.querySelectorAll("img.gif")找不到目标元素，后续的播放暂停逻辑根本没机会运行。

修复后的imgGif.js：

// 等DOM完全加载后再执行代码
document.addEventListener('DOMContentLoaded', function() {
  var gifElements = document.querySelectorAll("img.gif");

  // 把for...in换成普通for循环，避免遍历到数组的非元素属性
  for (var e = 0; e < gifElements.length; e++) {
    var element = gifElements[e];

    if (element.nodeName == "IMG") {
      var supergif = new SuperGif({
        gif: element,
        progressbar_height: 0,
        auto_play: false
      });

      var controlElement = document.createElement("div");
      controlElement.className = "gifcontrol loading g" + e;

      supergif.load(function(controlElement) {
        var self = this;
        controlElement.className = "gifcontrol paused";
        var playing = false;
        controlElement.addEventListener("click", function() {
          if (playing) {
            self.pause();
            playing = false;
            controlElement.className = "gifcontrol paused";
          } else {
            self.play();
            playing = true;
            controlElement.className = "gifcontrol playing";
          }
        });
      }.bind(supergif)(controlElement));

      var canvas = supergif.get_canvas();
      controlElement.style.width = canvas.width + "px";
      controlElement.style.height = canvas.height + "px";
      controlElement.style.left = canvas.offsetLeft + "px";
      var containerElement = canvas.parentNode;
      containerElement.appendChild(controlElement);
    }
  }
});

4. 检查文件路径 #

最后确认CSS和JS的引入路径是否和你的项目结构匹配，比如如果项目结构是：

你的项目文件夹/
├── index.html
├── css/
│   └── imgGif.css
└── js/
    └── imgGif.js

那HTML里的路径应该写成：

<link rel="stylesheet" href="css/imgGif.css">
<script src="js/imgGif.js"></script>

最终可用的HTML代码 #

<html>
<head>
  <link rel="stylesheet" href="css/imgGif.css">
  <!-- 引入SuperGif核心库 -->
  <script src="https://cdn.jsdelivr.net/npm/supergif@0.1.12/dist/jsgif.min.js"></script>
</head>
<body>
  <div style="width: 600px; margin: auto; text-align: center; font-family: arial">
    <p>And so, the unwritten law of the internet, that any experiment involving video/images must involve cats in one way or another, reared its head again. When would the internet's fascination with cats come to an end? Never. The answer is "Never".</p>
    <img src='https://hips.hearstapps.com/pop.h-cdn.co/assets/17/24/1497533116-not-dead.gif' class="gif" />
  </div>
  <!-- 把JS放到body末尾，确保DOM已加载 -->
  <script src="js/imgGif.js"></script>
</body>
</html>

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