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 и освежиться, и посмотрите, работает ли он.

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