Question

在我的网站上，我有三张图片1.png, 2.png and 3.png。当我点击1.png时，我希望在位于1a.gif的img标记中加载并显示/更新动画gif <div id="container">。当我点击2.png时，应显示2a.gif（当1a.gif消失时）等等......这是我的代码：

<html>
<body>
<div>
 <img src="1.png" onclick="document.getElementById('img').src = '1a.gif'" /> 
 <img src="2.png" onclick="document.getElementById('img').src = '2a.gif'" />
 <img src="3.png" onclick="document.getElementById('img').src = '3a.gif'" />
</div>

<div id="container">
<img id="img" src="1a.gif" />
</div>

</html>
</body>

它正在工作，但不可靠（使用firefox和chrome测试）！当我刷新html页面并单击1.png，而不是2.png ... suddendly时，只显示动画gif的第一帧。我必须再次点击相同的图像（1,2或3.png）以使gif运行。为什么？我正在寻找一个没有jquery的轻量级JavaScript解决方案。我只是问自己为什么单击图像后gif没有正常播放。

作为旁注：在加载gif（5 MB）时显示加载图像会很不错。我没有使用css实现这一点：

#container {background:url('loading.png') no-repeat; }

在这种情况下，加载图像根本不显示。可能是因为我直接从一个（例如1a.gif）更新到另一个（例如2a.gif）。

在加载gif之前显示它并没有帮助：

<img src="1.png" onclick="document.getElementById('img').src = 'loading.png';
document.getElementById('img').src = '1a.gif'" />

Answer 1

这种情况发生，因为第二个img尚未加载！我建议你把2 img放在2个不同的div中并使用javascript来隐藏/显示整个div！

Answer 2

有很多方法可以实现这类功能，但为了与您的工作方式保持一致，您需要加入onload的{{1}}事件。< / p>

请注意，在此代码段中，我无权访问您的GIF，因此我使用的是dummyimage.com服务，这项服务非常快，因此您不会长时间看到“加载”。

img

window.onload = function() {
  var img = document.getElementById('img');
  var container = document.getElementById('container');
  var showImage = function showImage() {
    img.style.display = "inline";
    container.style.backgroundImage = "";
  };
  img.addEventListener('load', showImage);
  img.addEventListener('error', showImage);
  var thumbs = document.getElementsByClassName('thumb');
  for (var i = 0, z = thumbs.length; i < z; i++) {
    var thumb = thumbs[i];
    var handler = (function(t) {
      return function clickThumb() {
        container.style.backgroundImage = "url('https://dummyimage.com/500x500/000/fff.gif&text=loading')";
        img.style.display = "none";
        img.src = t.dataset['image'];
      };
    })(thumb);
    thumb.addEventListener('click', handler);
  }
};

使用javascript onclick事件加载并播放gif

2 个答案: