html css Gif Анимация

Question

У меня есть .gif, играющий анимацию один раз. Это не цикл, и я не хочу, чтобы он зацикливался.

У меня есть 2 изображения, ("1 PNG" и "1" GIF анимированного)

Я хочу, чтобы каждый раз, когда мышь находится над PNG изображение, МФП пьесы.

Моя проблема заключается в том, что когда я устанавливаю мышь в положение png Image, gif играет один раз и останавливается. Когда я отворачиваю мышь и затем перемещаю ее по изображению, он больше не играет.

Мои CSS коды:

#icon{ 
float: left; 
width:50px; 
height:50px; 
background: url("images/smal_icon.png") no-repeat scroll 0% 0% transparent; 
} 
#icon:hover{ 
float: left; 
width:50px; 
height:50px; 
background: url("images/smal_icon.gif") no-repeat scroll 0% 0% transparent; 
} 

#icon является Div

Answer 1

По умолчанию вы не можете управлять циклом или анимацией GIF. Браузер будет просто воспроизводить GIF как есть.

Так что по умолчанию невозможно сказать, сколько времени должен играть GIF.

Есть три решения:
1. Вы заменяющие ГКЗ IMG с data:image так что вы встраивать в формате GIF. Всякий раз, когда изменяется src, GIF будет воспроизводиться снова. Используя встроенный GIF вместо реального URL-адреса, нет никакой перезагрузки GIF, так что это экономит время. См. http://www.websiteoptimization.com/speed/tweak/inline-images/ для примера
2. Как сказано в комментариях и других ответах, вы можете заменить src тега img на тот же GIF, но с добавлением к URL-адресу (например, someRandomNumber = 1345), чтобы он перезагрузите GIF и снова воспроизведите его. Недостатком является то, что GIF будет перезагружен.
3. Вы используете что-то вроде http://slbkbs.org/jsgif/, чтобы загрузить GIF через AJAX, затем нарисуйте его с помощью элемента canvas и получите полный контроль над ним ...

Answer 2

Looping является свойством самого GIF. Лучший способ сделать это - изменить GIF, чтобы анимация была бесконечно замкнута. Большинство редакторов изображений, которые принимают анимацию GIF, имеют опцию «Loop», которая может быть установлена ​​в true.

В противном случае вы можете сделать это взломанным способом с помощью JavaScript, перезагрузив изображение или повторно включив наведение после определенного таймфрейма (см. window.setInterval).

Answer 3

Вам нужно взять изображение из CSS для этой работы, а также использовать img src=

Но вы могли бы изменить это:

// hack for not caching .gifs in ff/chrome etc. 
$("img").each(function() { 
    var src = $(this).attr("src"); 
    if(/\.gif$/i.test(src)) { 
     $(this).attr("src", src.replace(/\.gif$/, ".gif?rnd=" + Math.floor(Math.random() * 100) + 1)); 
    } 
}); 

Что это делает

• Просматривает все изображения на странице
• проверяет, является ли это измененным .gif
• расширение для добавления случайного числа на ru.

Вы можете превратить это в функцию и вырезать биты, которые вам не нужны, чтобы каждый раз, когда вы наводили курсор на png, он снова запрашивал изображение .gif, потому что у него было бы другое число прилагается к концу.