如何在html，css中處理PNG圖像加載時間

Question

當我將<a>標記設置為特定的圖像背景時，如下所示：

HTML:
<a href="..." title="click here">Click Here</a>

CSS:
a {
  background: transparent url(button.png);
}

並且我希望每當用戶在現場盤旋時改變背景，如下所示：

CSS:
a {
  background: transparent url(button_HOVER.png);
}

當用戶將鼠標懸停在鏈接上時，懸停背景圖像會閃爍 （大約需要1-2秒才能完全加載）。

我可以將文件保存為GIF並縮小其大小和加載時間，但這would harm my specific image tremendously （它很大且圖形化程度很高）。

這就是我尋找更好的解決方案的原因，例如可能依靠瀏覽器緩存圖像的能力。 因此，我會將樣式應用於這樣的按鈕：

CSS:
a {
  background: transparent url(button_HOVER.png);
  background: transparent url(button.png);
}

這樣首先緩存圖像button_HOVER。 它似乎影響了“閃爍”，但並非完全。 我想可能用HOVER圖像創建一個隱藏標簽，這樣結果可能會有所不同。

你認為有更好的解決方法嗎？ （我強調我想把文件保存為PNG，重量為6-7k）。 我的方法有效嗎？

Answer 1

您的解決方案是將兩個圖像（懸停和活動）放在同一個圖像文件中。 位於彼此之上。 也稱為Image Sprites。 瀏覽器將加載整個圖像文件。 懸停時，您只需更改背景位置即可。

假設活動圖像位於頂部，並且懸停圖像位於該圖像的正下方..您的css代碼將類似於：

a.link {
  width:70px;
  height:24px;
  background: url(image.png) top no-repeat;
}
a.link:hover {
  background-position: bottom;
}

注意背景位置。 在這里我使用頂部和底部。 您也可以精確地以像素為單位。 此示例中的整個圖像的寬度為70像素，高度為48像素。 有些網站將所有小圖標放入一張圖片中。 完全加載，也可以節省請求。 :)

在這種情況下不需要預加載腳本。

Answer 2

可用的基本選項是使用隱藏在查看器中的html元素，或使用javascript。

盡管如此，html方法可能是最簡單的方法：

<div id="preloadedImageContainer">
<img src="img/to/preload_1.png" />
<img src="img/to/preload_2.png" />
</div>

with the css:
#preloadedImageContainer {position: absolute; top: -1000px; left: -1000px; }

或者，使用javascript：

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }
})(jQuery)

從這個頁面完全取消了jQuery方法： http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript 。

雖然最好的方法可能是，如里昂建議的那樣 ，css圖像精靈。

Answer 3

你應該搜索關於這個主題的“預加載圖像”你會找到使用css和javascript預加載圖像的方法。
我相信如果你把一個隱藏的圖像與源相等的png圖像的src你將在css文件中使用，這將使頁面加載時加載圖像，而CSS工作將只是切換預加載的圖像。