一旦使用JQuery将弹出窗口附加到页面后，如何使gif在弹出窗口内播放？

Question

编写一个小的扩展名，一旦单击了锚标签，该链接将变成常规文本，并弹出一个弹出框。一旦发生这种情况，就应该在弹出框内自动播放gif，但是，一旦弹出框动画化，我就会看到库存的“图像尚未加载”图像。我的弹出框元素是通过单击JQuery来添加的。我试过将attr（）设置为文件路径，并在CSS中也使用“ background-image”。

Javascript：

var counter = 0;

$(function() {
  $("a").on("click", togglePopup);
});

function togglePopup() {
  var popup = '<div class="popup"><img id="gif" src="boom.gif"/></div>';

  counter++; 

  if (counter === 2) {
    counter = 0;
    $(".popup").remove();
  }

  if ($(this).children(".popup").length > 0) {
    $(".popup").slideFadeToggle();
  } else {
    $(this)
      .attr("href", null)
      .css({
        "text-decoration": "none",
        color: "#333"
      });
    $(this).append(popup);
    $(".popup").slideFadeToggle();
  }
}

$.fn.slideFadeToggle = function() {
  return this.animate({ height: "toggle" }, "fast");
};

CSS：

.popup {
    border: 1px solid #999999;
    border-radius: 10px;
    cursor: default;
    display: none;
    position: relative;
    width: 200px;
    z-index: 100;
    padding: 25px 25px 20px;
}