Остановите загрузку gif-анимации, при наведении мыши начните активацию

У меня есть страница с большим количеством GIF.

<img src="gif/1303552574110.1.gif" alt="" >
<img src="gif/1302919192204.gif" alt="" >
<img src="gif/1303642234740.gif" alt="" >
<img src="gif/1303822879528.gif" alt="" >
<img src="gif/1303825584512.gif" alt="" >

Что я ищу

1 При загрузке страницы = > Анимация для всех gif остановлена

2 На mouseover = > Анимация начинается для этого gif

3 На mouseout = > Анимация останавливается снова для этого gif

Я предполагаю, что это можно сделать в JQuery, но я не знаю, как это сделать.

Ответы

Ответ 1

Нет, вы не можете управлять анимацией изображений.

Вам понадобится две версии каждого изображения: анимация, а другая - нет. При наведении вы можете легко перейти от одного изображения к другому.

Пример:

$(function(){
  $('img').each(function(e){
    var src = $(e).attr('src');
    $(e).hover(function(){
      $(this).attr('src', src.replace('.gif', '_anim.gif'));
    }, function(){
      $(this).attr('src', src);
    });
  });
});

Обновление:

Время идет, и возможности меняются. Как отметил kritzikatzi, наличие двух версий изображения не является единственным вариантом, вы, по-видимому, можете использовать элемент canvas для создания копии первого кадра анимации. Обратите внимание, что это не работает во всех браузерах, IE 8, например, не поддерживает элемент canvas.

Ответ 2

Я понимаю, что этот ответ запоздал, но я нашел довольно простое, элегантное и эффективное решение этой проблемы и счел необходимым разместить его здесь.

Однако, одна вещь, которую я чувствую, мне нужно прояснить, заключается в том, что это не запускает анимацию gif при наведении курсора мыши, приостанавливает ее на выводе мыши и продолжает ее, когда вы снова наводите на нее указатель мыши. Это, к сожалению, невозможно сделать с gifs. (Можно сделать так, чтобы строка изображений отображалась одна за другой, чтобы выглядеть как gif, но разделение каждого кадра ваших gif и копирование всех этих URL-адресов в script было бы трудоемким)

Что мое решение делает, так это изображение, похожее на то, что оно начинает перемещаться по мыши. Вы делаете первый кадр вашего gif изображения и помещаете это изображение на веб-страницу, затем заменяете изображение на gif на mouseover, и похоже, что он начинает двигаться. Он сбрасывается на мыши.

Просто вставьте этот script в раздел заголовка вашего HTML:

$(document).ready(function()
{
    $("#imgAnimate").hover(
        function()
        {
            $(this).attr("src", "GIF URL HERE");
        },
        function()
        {
            $(this).attr("src", "STATIC IMAGE URL HERE");
        });
});

И поместите этот код в тег img изображения, которое хотите оживить.

id="imgAnimate"

Это приведет к загрузке gif при наведении курсора мыши, так что будет казаться, что ваше изображение начинает двигаться. (Это лучше, чем загрузка gif onload, потому что переход от статического изображения к gif прерывается, потому что gif запускается на случайном кадре)

для более чем одного изображения просто ~~воссоздайте script~~, чтобы создать функцию:

<script type="text/javascript">

var staticGifSuffix = "-static.gif";
var gifSuffix = ".gif";

$(document).ready(function() {

  $(".img-animate").each(function () {

     $(this).hover(
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(staticGifSuffix, gifSuffix));
        },
        function()
        {
            var originalSrc = $(this).attr("src");
            $(this).attr("src", originalSrc.replace(gifSuffix, staticGifSuffix));  
        }
     );

  });

});
</script>

</head>
<body>

<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >
<img class="img-animate" src="example-static.gif" >

</body>

Этот кодовый блок - это действующая веб-страница (на основе предоставленной вами информации), которая отображает статические изображения и наведение, загрузку и отображение gif. Все, что вам нужно сделать, это вставить URL-адрес для статических изображений.

Ответ 3

Я думаю, что плагин jQuery freezeframe.js может пригодиться вам. freezeframe.js - это плагин jQuery для автоматической приостановки GIF и перезапускания анимации при наведении мыши.

Я думаю, вы можете легко адаптировать его, чтобы заставить его работать с загрузкой страницы.

Ответ 4

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

<img src="gif/1303552574110.1.gif" alt="" class="anim" >
<img src="gif/1302919192204.gif" alt="" class="anim" >
<img src="gif/1303642234740.gif" alt="" class="anim" >
<img src="gif/1303822879528.gif" alt="" class="anim" >
<img src="gif/1303825584512.gif" alt="" class="anim" >

$(window).load(function() {
  $(".anim").src("stillimage.gif");
});

$(".anim").mouseover(function {
  $(this).src("animatedimage.gif");
});

$(".anim").mouseout(function {
  $(this).src("stillimage.gif");
});

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

Ответ 5

Вы можете решить эту проблему, имея длинную полоску, которую вы показываете пошагово, как диафильм. Затем вы можете остановить фильм на любом кадре. Пример ниже (скрипт доступен в http://jsfiddle.net/HPXq4/9/):

разметка:

 <div class="thumbnail-wrapper">
     <img src="blah.jpg">
 </div>

css:

.thumbnail-wrapper{
   width:190px;
   height:100px;
   overflow:hidden;
   position:absolute;
}
.thumbnail-wrapper img{
   position:relative;
   top:0;
}

js:

var gifTimer;
var currentGifId=null;
var step = 100; //height of a thumbnail
$('.thumbnail-wrapper img').hover(
   function(){
      currentGifId = $(this)
      gifTimer = setInterval(playGif,500);
   },
   function(){
       clearInterval(gifTimer);
       currentGifId=null;
   }
);

var playGif = function(){
   var top = parseInt(currentGifId.css('top'))-step;
   var max = currentGifId.height();
   console.log(top,max)
   if(max+top<=0){
     console.log('reset')
     top=0;
   }
   currentGifId.css('top',top);
}

очевидно, это можно оптимизировать гораздо дальше, но я упростил этот пример для удобочитаемости

Ответ 6

Для перезапуска анимации gif-изображения вы можете использовать код:

$('#img_gif').attr('src','file.gif?' + Math.random());

Ответ 7

Более элегантная версия Mark Kramer должна была бы сделать следующее:

function animateImg(id, gifSrc){
  var $el = $(id),
    staticSrc = $el.attr('src');
  $el.hover(
    function(){
      $(this).attr("src", gifSrc);
    },
    function(){
      $(this).attr("src", staticSrc);
    });
}

$(document).ready(function(){
  animateImg('#id1', 'gif/gif1.gif');
  animateImg('#id2', 'gif/gif2.gif');
});

Или даже лучше использовать атрибуты данных:

$(document).ready(function(){
  $('.animated-img').each(function(){
    var $el = $(this),
      staticSrc = $el.attr('src'),
      gifSrc = $el.data('gifSrc');
    $el.hover(
      function(){
        $(this).attr("src", gifSrc);
      },
      function(){
        $(this).attr("src", staticSrc);
      });
  });
});

И img el будет выглядеть примерно так:

<img class="animated-img" src=".../img.jpg" data-gif-src=".../gif.gif" />

Примечание. Этот код не проверен, но должен работать нормально.

Ответ 8

Есть только один путь от того, что я знаю.

У вас есть 2 изображения, сначала jpeg с первым фреймом (или тем, что вы хотите) gif и фактическим gif.

Загрузите страницу с помощью jpeg на месте и с помощью мыши, замените jpeg на gif. Вы можете предварительно загрузить gifs, если хотите, или если они имеют большой размер, показывают загрузку, когда gif загружается, а затем заменяет jpeg.

Если вы хотите, чтобы он был билинейным, как в режиме gif, играйте на мыши, остановите его на мыши, а затем возобновите воспроизведение из кадра, который вы остановили, тогда это невозможно сделать с помощью javascript + gif combo.

Ответ 9

Добавление суффикса следующим образом:

$('#img_gif').attr('src','file.gif?' + Math.random());

браузер вынужден загружать новое изображение каждый раз, когда пользователь обращается к странице. Кроме того, клиентский кеш может быть быстро заполнен.

Здесь следует альтернативное решение, которое я тестировал на Chrome 49 и Firefox 45.
В таблице стилей css свойство display отображается как "none", например:

#img_gif{
  display:'none';
}

Вне вставки '$ (document).ready':

$(window).load(function(){ $('#img_gif').show(); });

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

Обратите внимание, что:
После обновления страницы анимация gif не будет перезагружена (например, нажатие "F5" ).
Оператор $(document).ready не производит такого же эффекта "$(window).load".
Свойство "видимость" не дает такого же эффекта "отображения".