Onclick воспроизводит GIF-образ с помощью jQuery и начинается с начала




reload animated-gif (2)

У меня есть сайт с изображениями на нем. Некоторые из изображений являются анимированными изображениями 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 из JavaScript без перезагрузки изображения.

в оболочке ореха загрузите изображение в переменную javascript, затем измените src на клик

$(function(){
    var image = new Image();
       image.src='http://rack.3.mshcdn.com/media/ZgkyMDEyLzEwLzE5LzExXzMzXzMzXzE3Nl9maWxlCnAJdGh1bWIJMTIwMHg    5NjAwPg/462b8072';
     $('#img').click(function(){
       $(this).attr('src',image.src);
     }); 
 });

http://jsfiddle.net/GS427/1/

его уродливый я не мог найти правильный образ для запуска, но вы можете видеть, что он начинается в одном и том же месте каждый раз


Вам нужно разделить событие мыши на mousedown и mouseup, сначала спрячьтесь и покажите секунду или наоборот на mousedown, затем сначала спрячьтесь и покажите второй или наоборот,







animated-gif