gif анимация не воспроизводится при обновлении
В первый раз, когда я просматриваю страницу с анимированным.gif, он прекрасно работает при загрузке страницы (длится около 2 секунд).
При обновлении (F5).gif больше не воспроизводится, и отображается только последний кадр анимации GIF.
Могу ли я что-нибудь сделать, чтобы он работал каждый раз?
5 ответов
Для PHP гораздо лучший вариант, чем использование date("Ymdgis");
использует time()
, как это:
<img src="picturePath.gif?<?php echo time();?>" />
Странное поведение, которое влияет на каждый браузер..
Я обычно обновляю его вручную с помощью этого скрипта (он использует jQuery)
<img id="gif_animata" src="picturePath.gif">
<script type="text/javascript">
var gifSource = $('#gif_animata').attr('src'); //get the source in the var
$('#gif_animata').attr('src', ""); //erase the source
$('#gif_animata').attr('src', gifSource+"?"+new Date().getTime()); //add the date to the source of the image... :-)
</script>
Это обновит источник изображения, добавив текущую дату, поэтому браузер перезагрузит его, думая, что это новое изображение.
В противном случае в PHP (я предпочитаю это):
<img src="picturePath.gif?<?php echo date("Ymdgis");?>" />
//for the browser it will seems that's a new picture!
<img src="picturePath.gif?2012092011207">
Обходной путь, который работает для меня для этой проблемы, состоит в том, чтобы перезагрузить GIF вручную, используя Javascript
GIF реализован на CSS (background-images)
var element = document.getElementById(name);
element.style.backgroundImage = "none";
element.style.backgroundImage = "url(imagepath.gif?"+new Date().getTime()+")";
GIF реализован на HTML (тег img)
var element = document.getElementById(name);
element.src = "";
element.src = "imagepath.gif?"+new Date().getTime();
Благодаря @sekmo
Это работает, требуется только одна строка под ним, и я предлагаю не заполнять <img>
Сначала атрибут src, поэтому страница не пытается загрузить ненужные ресурсы.
<img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a="+Math.random()</script>
Возможно, ваш браузер просто показывает кэшированную версию. Попробуйте удерживать shift и освежиться, и посмотрите, работает ли он.