Запустить GIF при наведении мыши и приостановить в противном случае? - PullRequest
Новая
       4

Запустить GIF при наведении мыши и приостановить в противном случае?

4 голосов
/ 15 декабря 2011

Итак, я пытаюсь разместить эти изображения на боковой панели создаваемой страницы, которые являются статичными, но при наведении курсора мыши они анимируются в виде GIF-файлов.Моя текущая установка состоит в том, чтобы изображение свойства background-image css было статичным jpg в обычном режиме, но при наведении мыши на анимированный gif.Вот код, чтобы лучше проиллюстрировать мою точку зрения.

CSS: 

#segments li a.fnb {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/
}

#segments li a.whhu {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg);
}

#segments li a.fnb:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif);
}

#segments li a.whhu:hover {
background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif);
}

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

HTML: 

<ul id="segments">
    <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li>
    <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li>
</ul>

Сайт http://tcptest.tumblr.com, проверьте левую боковую панель с изображениями, чтобы увидеть, как она работает в настоящее время.

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

Я попробовал эту идею ( ссылка ) об использовании JS, но мне это не удалось.

Так что яугадай мой вопрос: есть ли лучший способ сделать это с помощью CSS или любого другого языка, чтобы я не получил этот случайный пустой момент?

Ответы [ 3 ]

6 голосов
/ 15 декабря 2011

Вы можете включить изображения в IMG элементах в другом месте страницы и поместить их в скрытый контейнер (display:none или visibility:hidden в CSS), чтобы они загружались при первой загрузке страницы, но не были видны.Это должно послужить для кэширования клиентской части изображения с наведением, чтобы вы не получали задержку, когда браузер запрашивает: hover изображение, указанное в CSS.

Я был бы склонен использоватьтот же путь к файлу в атрибуте IMG SRC, который вы используете в CSS, чтобы браузер воспринимал его как то же изображение.

Это если решение JavaScript не работает для вас.

Из приведенного выше примера ... 

<!-- Cache Images -->
<div style="display:none">
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif" alt="">
<img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif" alt="">
</div>

РЕДАКТИРОВАТЬ:

Существует дополнительная проблема с анимированными GIF-файлами, которые могут повлиятьВы, в зависимости от анимации ... Независимо от того, предварительно загружено ли анимированное (зависшее) изображение или нет, после загрузки браузеры, как правило, воспроизводят изображение в фоновом режиме независимо от того, отображается оно в данный момент или нет.Таким образом, перемещение с изображения и его повторение снова приводит к тому, что анимация «прыгает» в ее текущее положение, а не продолжается с того места, куда анимация попала при перемещении с изображения.Более заметно с длинными анимациями, а не с короткими.

3 голосов
/ 15 декабря 2011

То, что вы хотите узнать, это как предварительно загрузить изображения. Поиск в Google по запросу «Изображения с предзагрузкой HTML» поможет вам ...

Эта ссылка, кажется, имеет хорошую идею, используя javascript.

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

1 голос
/ 15 декабря 2011

Вы можете добавить DIV на свою страницу, которая скрыта (display: none) через CSS и поместить туда теги IMG для анимированных GIF-файлов.Это заставит изображения предварительно загружаться со страницей.

Проверьте эту ссылку для более подробной информации.

...