鼠标悬停时启动 GIF，否则暂停？

发布于 2024-12-21 10:41:56 字数 1431 浏览 1 评论 0原文

因此，我尝试将这些图像放在我正在构建的页面的侧边栏上，这些图像是静态的，但当您将鼠标悬停时，它们会以 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 时该框变为空白。虽然这没什么大不了的，但看起来确实不专业。

我尝试了这个想法（link）使用JS，但它让我失败。

所以我想我的问题是：有没有更好的方法用 CSS 甚至任何其他语言来做到这一点，这样我就不会得到这个随机的空白时刻？

原文

So I'm trying to have these images on the sidebar of a page I'm building that are static but when you mouseover they animate as gifs. My current setup is to have the background-image css property image be a static jpg normally but change to an animated gif on mouseover. Here's the code, to illustrate my point better.

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

I'll spare you from the rest, it's unnecessary to make my point.

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>

The site is http://tcptest.tumblr.com, check out the left side bar with the images to see how it works currently.

This works, but my only problem is that for the first hover ever, it has to load the gif and this cause a short moment where the box goes blank while it loads the gif. While this isn't a huge deal, it looks really unprofessional.

I tried this idea (link) of using JS, but it failed me.

So I guess my question is: is there a better way to do this with CSS or even any other language so that I don't get this random blank moment?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

桃扇骨 2024-12-28 10:41:56

您可以将图像包含在页面其他位置的 IMG 元素中，并将它们放在隐藏容器中（display:none 或 visibility:hidden CSS），因此它们在页面首次加载时加载，但不可见。这应该用于缓存客户端的悬停图像，这样当浏览器请求 CSS 中引用的 :hover 图像时就不会出现延迟。

我倾向于在 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 还存在一个可能影响您的问题，具体取决于动画...无论动画（悬停）是否) 图像是否预加载，一旦加载，浏览器往往会在后台播放该图像，无论当前是否显示。因此，从图像上移开并再次返回到图像上会导致动画“跳转”到其当前位置，而不是从移开图像时动画所在的位置继续。长动画比短动画更引人注目。

You could include the images in IMG elements elsewhere on the page and have them in a hidden container (display:none or visibility:hidden in the CSS) so they are loaded when the page first loads, but not visible. This should serve to cache the hovered image client side so you don't get the delay when the browser requests the :hover image referenced in the CSS.

I would be inclined to use the same file path in the IMG SRC attribute that you use in the CSS to ensure the browser sees it as the same image.

That's if the JavaScript solution isn't working for you.

From your example above...

<!-- 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>

EDIT:

There is an additional problem with animated GIFs that might affect you, depending on the animation... Regardless of whether the animated (hover) image is preloaded or not, once it is loaded, browsers tend to play the image in the background regardless of whether it is currently displayed or not. So, moving off the image and back over it again results in the animation 'jumping' to its current position, rather than continuing from where the animation had got to when you moved off the image. More noticeable with long animations rather than short ones.

回复收藏 0 原文