当前位置：文江博客话题详情

HTML 图像翻转 - 翻转前图像未完全加载？

发布于 2024-10-09 17:31:33 字数 172 浏览 13 评论 0原文

我有一个图像（在左上角作为主页链接），我使用 CSS :hover 在鼠标悬停时更改图像。

问题是，第一次翻转图像时需要一些时间来加载图像。有一个临时空白区域，您会看到图像逐渐加载。大约需要一秒钟，但这很烦人。

如何解决此问题以使翻转无缝？有没有办法预加载图像？

原文

分享到QQ

分享到微博

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

发布评论

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

同尘 2024-10-16 17:31:33

我可以立即想到两个选项：

CSS 图像精灵，或者
将 :hover 图像放置在页面其他位置的隐藏 div 中。

1、精灵：

对于 CSS Sprite，为“主页”链接提供一张背景图片，只需更改其在 :hover 上的位置：

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

不过，这确实需要为具有 css-sprite 背景的元素设置高度。

2、隐藏预加载元素：

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>

There's two options I can think of, off-hand:

css image sprites, or
placing the :hover image in a hidden div elsewhere in the page.

1, sprites:

For a CSS Sprite, have one background image for the 'home' link, and simply change its position on the :hover:

#home {
    background-image: url(http://example.com/spriteOne.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}

#home:hover {
    background-position: 0 200px;
}

This does require set heights for the elements with the css-sprite background, though.

2, hidden preloading elements:

#home {
    background-image: url(http://example.com/bg.png);
    background-repeat: no-repeat;
    background-position: 0 100px;
}
#home:hover {
    background-image: url(http://example.com/hoverBg.png);
}
#preload,
#preload img {
    display: none;
}

<div id="preload">
    <img src="http://example.com/hoverBg.png" />
</div>

回复收藏 0 原文

栀梦 2024-10-16 17:31:33

1.答案：
使用 CSS Sprites

2.答案： 或者创建类似这样的内容：

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

以及 CSS：

img.nohover {
边框：0
}
img.hover{
边框：0；
显示：无
}
a:hover img.hover {
显示：内联
}
a:hover img.nohover {
显示：无
}

1. Answer:
Use CSS Sprites

2. Answer: Or create something like this:

<a href="link.html">

<!-- Remove this img-tag if you don't have a 'nohover' background -->
<img alt="image" src="images/image.png" class="nohover" />

<img alt="imagehover" src="images/image.png" class="hover" />

</a>

And the CSS:

img.nohover {
border:0
}
img.hover {
border:0;
display:none
}
a:hover img.hover {
display:inline
}
a:hover img.nohover {
display:none
}

回复收藏 0 原文

本王不退位尔等都是臣 2024-10-16 17:31:33

我发现对于翻转非常有效的一种方法是使用 CSS 精灵，即使用包含图像的原始版本和翻转版本的图像。这样两个版本就会同时加载，并且在它们之间进行更改只需更改 background-position 样式即可。

回复收藏 0 原文

羞稚 2024-10-16 17:31:33

一种方法是使用相同的 URL 将不可见图像添加到您的页面。因此，通过将以下内容添加到文档正文的开头，实际上是在指示浏览器尽快加载该图像。

<IMG src="rolloverImage.png" style="display:none">

虽然此标签仍然是文档的一部分，但由于“display:none”设置，它不会显示甚至不会呈现。您甚至可以监听其加载事件，并在加载后将标签从 DOM 中完全删除，以将“垃圾”排除在文档之外。一旦图像加载到内存中，每次引用相同的 URL 时都会自动重用该图像，因此一旦将其他图像的源设置为相同的 URL，它将从内存中加载。

希望有帮助，
科比

One way to do it is to add an invisible image to your page, with the same URL. So by adding the following to the beginning of the documents body, you actually instruct the browser to load this image as soon as possible.

<IMG src="rolloverImage.png" style="display:none">

While this tag remains a part of your document, it is not shown or even rendered because of the "display:none" settings. You can even listen to its load event and remove the tag completely from the DOM once it is loaded, to keep the "garbage" out of the document. Once an image is loaded to memory, it is automatically reused every time you refer to the same URL, so once you set the source of the other image to the same URL, it will be loaded from memory.

Hope that helps,
Kobi

回复收藏 0 原文