HTML圖像翻轉-翻轉之前圖像未完全加載？

Question

我有一個圖像（在左上角為主頁鏈接），並且我使用CSS：hover在翻轉時更改了圖像。

問題是，圖像在我第一次翻轉時需要花費一些時間來加載。 有一個臨時的空白，您會看到圖像逐漸加載。 這大約需要一秒鍾，但是很煩人。

我該如何解決這個問題，以便過渡是無縫的？ 有沒有辦法預加載圖像？

Answer 1

我可以臨時考慮兩種選擇：

1. CSS圖像精靈，或
2. 將:hover圖片放置在頁面其他位置的隱藏div中。

---

1，精靈：

對於CSS Sprite ，為“ home”鏈接提供一個背景圖片，只需更改其在: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>

Answer 2

我發現一種非常適合翻轉的方法是使用CSS Sprite，即使用包含圖像原始版本和翻轉版本的圖像。 這樣，兩個版本會同時加載，並且在它們之間進行更改只是更改background-position樣式的問題。

Answer 3

一種方法是使用相同的URL向頁面添加不可見的圖像。 因此，通過在文檔正文的開頭添加以下內容，您實際上指示瀏覽器盡快加載此圖像。

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

雖然此標記仍是文檔的一部分，但由於設置了“ display：none”，因此無法顯示甚至渲染。 您甚至可以監聽其load事件，並在DOM加載后將其完全從DOM中刪除，以將“垃圾”拒之門外。 將圖像加載到內存后，每次您引用相同的URL時，它將自動重用，因此，將其他圖像的源設置為相同的URL后，將從內存中加載該圖像。

希望有幫助，科比

Answer 4

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 {

顯示：無

}

Answer 5

將圖片放在div中，並將其樣式設置為{ height: 0; overflow: hidden; } { height: 0; overflow: hidden; } { height: 0; overflow: hidden; } ，這將使瀏覽器預加載圖像。