Воспроизведите или замените изображение GIF на клике на jQuery и начните с начала

У меня есть сайт с изображениями на нем. Некоторые изображения являются анимированными изображениями GIF. Что я сделал, так это показал статическое изображение GIF, и при событии щелчка отображаются реальные изображения GIF.

Вот мой код:

JQuery

$(".theimage").click(function() {
$(this).addClass('hidden');
$(this).next().removeClass('hidden');
});
$(".theimage2").click(function() {
 $(this).addClass('hidden');
$(this).prev().removeClass('hidden');
});

HTML

<img class="theimage" src="image_static.gif" alt=""/>

<img class="theimage2 hidden" src="image_animated.gif" alt=""/>

CSS

.hidden{
display:none !important;
}

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

Пока все хорошо, скрипт работает. На самом деле я пытаюсь добиться того, чтобы изображение в формате GIF всегда начиналось с самого начала. На данный момент это происходит только в первый раз. Затем, похоже, что он продолжает играть в фоновом режиме, а во время второго вызова он просто продолжает играть. Иногда даже зависает, я думаю, что-то связанное с кешем.

Итак, возможно ли перезагружать GIF-изображение при каждом его вызове? Я пытался с помощью

+ new Date().getTime()

но это, кажется, не имеет никакого эффекта при смене классов.

Есть идеи?

0 ответов

Другие вопросы по тегам