如何處理HTML PNG圖像加載時間，CSS

當我有一個<a>標籤設置爲特定圖像的背景是這樣的：如何處理HTML PNG圖像加載時間，CSS

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）。我的方法有效嗎？

來源

2010-03-07 Gal

您的解決方案是將兩個圖像（懸停和活動）放在同一個圖像文件中。定位在彼此頂部。也被稱爲圖像精靈。瀏覽器將加載整個圖像文件。在懸停時，您只需更改背景位置。

假定活動圖像是在頂部，和懸停圖像如下that..your CSS代碼直接定位會是這樣的：

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

通知背景位置。這裏我使用頂部和底部。你也可以精確地以像素爲單位。這個例子中的整個圖像的寬度爲70像素，高度爲48像素。有些網站將所有小圖標放在一個圖像中。完全加載，除了請求之外。 :)

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

來源

2010-03-07 14:40:56 Lyon

這也是一個不錯的解決方案，我同意。 – 2010-03-07 14:41:49

這真是太棒了！偉大的解決方案，我沒有想到，非常感謝！ – Gal 2010-03-07 14:47:26

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

來源

2010-03-07 14:37:57

可用的基本選項是使用隱藏在查看器中的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：http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-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的做法，從這個頁面全部被取消。

雖然最好的方法可能是，如Lyon suggests，css圖像精靈。

來源

2010-03-07 14:41:23

如何處理HTML PNG圖像加載時間，CSS

回答

相關問題