CODEWITHSUNDEEP
javascripthtmlcss
Chris
Chris

Reputation: 157

Load and play a gif with javascript onclick event

On my website I have three images 1.png, 2.png and 3.png. When I click on 1.png, I want the animated gif 1a.gif to be loaded and shown/updated in the img tag located in <div id="container">. When I click on 2.png, 2a.gif should be displayed (while 1a.gif vanishes) and so on... This is my code:

<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>

It is working, however unreliable (tested with firefox and chrome)! When I refresh the html page and click on 1.png, than on 2.png ... suddendly at one point only the first frame of the animated gif is shown. I have to click on the same image (1,2 or 3.png) again in order to make the gif run. Why? I am looking for a light weight javascript solution without jquery. I am just asking myself why the gif is not played properly once I click on the image.

As a side note: It would be nice to show a loading image while the gif (5 MB) is loading. I failed to achive that using css:

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

In this case the loading image doesn't show up at all. Probably because I am updating directly from one (e.g. 1a.gif) to another (e.g. 2a.gif).

Showing it right before loading the gif did not help as well:

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

Upvotes: 0

Views: 7970

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12113

There are many ways of implementing this kind of thing, but to keep in line with how you're doing it, you'll want to hook into the onload event of the img.

Note that in this snippet, I don't have access to your GIFs, so I'm using the dummyimage.com service, which is pretty fast, so you don't see the "loading" for very long. 

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);
  }
};
<div>
  <img src="1.png" class="thumb" data-image="https://dummyimage.com/500x200/000/fff.gif" />
  <img src="2.png" class="thumb" data-image="https://dummyimage.com/200x200/000/fff.gif" />
  <img src="3.png" class="thumb" data-image="https://dummyimage.com/500x500/000/fff.gif" />
</div>

<div id="container">
  <img id="img" class="main" />
</div>

Upvotes: 1

user3187960
user3187960

Reputation: 337

This happens bacause the second img is not loaded yet! I suggest you to put the 2 img in 2 different divs and the use javascript to hide/show the entire div!

Upvotes: 0

Related Questions