анимация gif не воспроизводится при обновлении

#html #jquery #css

#Анимация #обновить #gif #автозапуск #браузер -обновить

Вопрос:

При первом просмотре страницы с анимированным .gif он отлично воспроизводится при загрузке страницы (длится около 2 секунд).

При обновлении (F5) файл .gif больше не воспроизводится и отображается только последний кадр GIF-анимации.

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

Ответ №1:

Для PHP гораздо лучшим вариантом, чем использование date("Ymdgis"); , является использование time() , например:

 <img src="picturePath.gif?<?php echo time();?>" />

Ответ №2:

Странное поведение, которое влияет на каждый браузер..
Обычно я обновляю ее вручную с помощью этого скрипта (он использует 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>

Это обновит src изображения, добавив текущую дату, поэтому браузер повторно загрузит его, думая, что это новое изображение.

В противном случае 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">

1. когда я применяю этот метод php, я получаю примерно секундную задержку при отображении gif на веб-сайте, но не на локальном хостинге. вы знаете, почему это так?

2. да, я заметил эту небольшую проблему, но мне было все равно, потому что это очень мало времени … 🙂

3. если вы когда-нибудь узнаете, дайте мне знать, потому что я действительно хочу это выяснить.

4. Как обрабатывать фоновые изображения в этом сценарии?

5. Девять лет спустя этот код все еще помог мне. Спасибо, собака, мои gif-файлы обновляются на лету еще 9 лет из-за этой прекрасной вещи, которую мы называем interweb ye ye

Ответ №3:

Обходной путь, который мне подходит для решения этой проблемы, — перезагрузить GIF вручную с помощью Javascript

GIF реализован на CSS (фоновые изображения)

 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

Ответ №4:

Это работает, требуется только одна строка под ним, и я предлагаю сначала не заполнять атрибут <img> src, чтобы страница не пыталась загрузить ненужные ресурсы.

 <img id="gif" src=""/>
<script>document.getElementById('gif').src="path_to_picture.gif?a=" Math.random()</script>

Ответ №5:

Возможно, ваш браузер просто показывает кэшированную версию. Попробуйте удерживать shift и обновлять, и посмотрите, работает ли это.