Как сделать рестарт gif изображения по клику?

Question

[Intel Inside]

Пробовал так в див вставлять:
baraban - блок с background .gif
baraban2 - блок с background .png

onclick="this.className = (this.className == 'baraban' ? 'baraban2' : 'baraban')"

При первом клике со статики на гиф меняется и гифка воспроизводится, но при следующем нажатии показывается уже "законченная" гифка, как сделать воспроизведение сначала?

Делать зацикленную гифку не вариант

Answer 1

[Алексей Рытиков]

Сначала нужно подгрузить картинку:

var gif = new Image();
gif.src = "path";

Первый раз картинке выставляешь src на gif.onload:
img.attr('src', gif.src);

Потом свапаешь src с "ничем":

img.attr('src', '');
img.attr('src', gif.src);

Так картинка не будет реально перезагружаться с сервера.

Answer 2

[Сергей Сергей]

Как вариант:
1) удалить элемент из DOM,
2) поменять стиль/класс элементу,
3) вернуть элемент в DOM.

Answer 3

[Дмитрий]

Можно просто обновить src у img, добавив в конце что-нибудь типа ?rand=1 и далее можно если параметр уже был, увеличивать его.

Comments

[Алексей Рытиков]

Так картинка будет реально заново загружаться с сервера