Блог

Главная - Вопросы по программированию - Загрузка и воспроизведение gif с помощью события onclick на javascript

Загрузка и воспроизведение gif с помощью события onclick на javascript

#javascript #html #css

#javascript #HTML #css

Вопрос:

На моем веб-сайте у меня есть три изображения 1.png, 2.png and 3.png . Когда я нажимаю 1.png , я хочу, чтобы анимированный gif 1a.gif загружался и отображался / обновлялся в теге img, расположенном внутри <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… внезапно в какой-то момент отображается только первый кадр анимированного gif-файла. Я должен снова щелкнуть по тому же изображению (1,2 или 3.png), чтобы запустить gif. Почему? Я ищу легкое решение javascript без jquery. Я просто спрашиваю себя, почему gif не воспроизводится должным образом, как только я нажимаю на изображение.

В качестве примечания: было бы неплохо показать загружаемое изображение во время загрузки gif (5 МБ). Мне не удалось добиться этого с помощью 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'" />

Ответ №1:

Существует много способов реализации такого рода вещей, но чтобы соответствовать тому, как вы это делаете, вам нужно подключиться к onload событию img .

Обратите внимание, что в этом фрагменте у меня нет доступа к вашим GIF-файлам, поэтому я использую dummyimage.com обслуживание, которое происходит довольно быстро, так что вы не видите «загрузку» очень долго. 

 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.gifamp;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>

Ответ №2:

Это происходит потому, что второй img еще не загружен! Я предлагаю вам поместить 2 изображения в 2 разных раздела и использовать javascript, чтобы скрыть / показать весь раздел!

Комментарии:

1. gif-файлы такие большие. Я хотел загружать их только при нажатии на x.png, чтобы минимизировать время загрузки и трафик.