Остановите загрузку 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».
Свойство «видимость» не дает такого же эффекта «отображения».

  • Использование jQuery для AJAX с веб-формами ASP.NET
  • Jquery Ajax Загрузка изображения
  • jQuery модальный диалог и jqGrid
  • Как получить доступ к содержимому iframe с помощью jQuery?
  • Как проверить, нажата ли клавиша во время события click с помощью jQuery?
  • Вставить текст в textarea с помощью jQuery
  • Как использовать тип: «POST» в jsonp ajax call
  • Триггерное нажатие на input = файл при асинхронном выполнении ajax ()
  • Как вернуть JSON из веб-службы 2.0 asmx
  • Как проверить, какая версия jQuery загружена?
  • Каковы различия между обычным и тонким пакетом jquery?
  • Interesting Posts

    Почему Spring MVC отвечает 404 и сообщает «Нет сопоставления для HTTP-запроса с URI в DispatcherServlet»?

    Изменить имя пользователя Win 8

    байт для записи в Java

    Windows 7 сохранить диалог висит – любые решения?

    Как установить соединение между двумя компьютерами в разных подсетях?

    Как добавить один день к дате?

    Могу ли я использовать скрипт bash в качестве службы в OS X без необходимости устанавливать его автозагрузчиком?

    Как связаны zlib, gzip и zip? Что у них общего и как они отличаются?

    Запустите приложение OS X с помощью сочетания клавиш

    .NET Integer vs Int16?

    Настройка отдельных ускорений для мышей (скорости на указателя)

    Когда вы будете использовать WeakHashMap или WeakReference?

    Установка обновлений Windows 10 при завершении работы

    Нажатие клавиши с символом акцента позволяет ввести дважды

    В чем разница между JVM, JDK, JRE и OpenJDK?

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