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

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

     

Что я ищу

1 На странице load => Анимация для всех gifs остановлена

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

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

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

9 Solutions collect form web for “Остановите загрузку gif-анимации, при наведении мыши начните активацию”

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

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

Пример:

 $(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.

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

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

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

Просто вставьте этот скрипт в главный раздел вашего 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 запускается на случайном кадре)

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

          

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

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

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

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

      $(window).load(function() { $(".anim").src("stillimage.gif"); }); $(".anim").mouseover(function { $(this).src("animatedimage.gif"); }); $(".anim").mouseout(function { $(this).src("stillimage.gif"); }); 

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

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

разметка:

  

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); } 

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

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

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

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

 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 выглядел бы примерно так:

  

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

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

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

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

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

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

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

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

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

 #img_gif{ display:'none'; } 

Вне слова ‘$ (document) .ready’ insert:

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

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

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

  • Получить параметр url jquery или Как получить значения строк запроса в js
  • Слайд справа налево?
  • Как отправить запрос PUT / DELETE в jQuery?
  • Сравнение использования памяти в браузере: встроенный onClick против использования JQuery .bind ()
  • В чем смысл заголовка X-Requested-With?
  • jQuery остановить дочернее событие запуска родительского события
  • Преобразование миллисекунд в дату (jQuery / JavaScript)
  • Плагин jQuery Validation: отключить проверку для указанных кнопок отправки
  • Проверьте, нет ли входов пустых с помощью jQuery
  • Выделите div с помощью jquery
  • ASP.NET MVC $ .post вызов возвращающей строки ... нужна помощь с форматом для jqGrid
  • Индикатор выполнения загрузки файла с помощью jQuery
  • Interesting Posts

    Выполните еще одну банку в программе java

    Устали от ожидания на www.google-analytics.com – может ли настройка браузера «отказаться от меня»?

    Есть ли программное обеспечение для Mac OSX, которое управляет запуском групп приложений?

    Как изменить временную метку старой фиксации в Git?

    Строки Java: «String s = новая строка (« глупо »);

    Твердые конденсаторы лопнут, ПК кажется прекрасным, насколько безопасно продолжать его использовать?

    Как компьютер / ОС сообщают, какая оперативная память находится в машине?

    Условно игнорирование тестов в JUnit 4

    Использование пользовательских шрифтов без прав администратора?

    Программное обеспечение магазина / рынок для Windows с бесплатным?

    Десять внешних жестких дисков через USB-концентратор

    Как запустить скрипт bash за пределами терминала?

    Разбор JSON в Excel VBA

    Ожидание против Задачи. Подождите – Тупик?

    Как использовать iTerm с QuickSilver

    Давайте будем гением компьютера.