我有這個網頁,它顯示了一些圖像和一些圖像在一個mouseover事件上,因此它們需要時間來顯示。 我已經通過放置鼠標懸停圖像並通過顯示none屬性將它們放入瀏覽器緩存並在mouseover上快速顯示它們來解決它。我一直在想,可以通過其他方式將圖像插入到瀏覽器的緩存中就像使用jQuery或其他東西,所以我不必將圖像以隱藏的形式。是否有可能在渲染之前在緩存中插入圖像
我不知道這是一個愚蠢的問題。
請評論。
問候 人士Himanshu夏爾馬
我有這個網頁,它顯示了一些圖像和一些圖像在一個mouseover事件上,因此它們需要時間來顯示。 我已經通過放置鼠標懸停圖像並通過顯示none屬性將它們放入瀏覽器緩存並在mouseover上快速顯示它們來解決它。我一直在想,可以通過其他方式將圖像插入到瀏覽器的緩存中就像使用jQuery或其他東西,所以我不必將圖像以隱藏的形式。是否有可能在渲染之前在緩存中插入圖像
我不知道這是一個愚蠢的問題。
請評論。
問候 人士Himanshu夏爾馬
您可以預先加載圖像,使它們在緩存中,以便它們可以立即用於鼠標事件等。有關預緩存圖像陣列的示例代碼,請參見this post。
function preloadImages(srcs) {
if (!preloadImages.cache) {
preloadImages.cache = [];
}
var img;
for (var i = 0; i < srcs.length; i++) {
img = new Image();
img.src = srcs[i];
preloadImages.cache.push(img);
}
}
// then to call it, you would use this
var imageSrcs = ["src1", "src2", "src3", "src4"];
preloadImages(imageSrcs);
你可以使用(new Image).src="http://path/to/img.jpg"
這將會使瀏覽器加載它
這會將圖像放入緩存中嗎? – 2012-01-12 07:14:31
你的意思是......'新形象()。src =「」' – 2012-01-12 07:15:20
不,這是有效的。它會使瀏覽器加載並緩存它:) – 2012-01-12 07:20:15
首先,使用精靈的小和/或「鼠標懸停」圖像。 另外,是的,你可以用javascript預加載圖片,但記住關於頁面加載順序,所以它可能不會比css更快。
我們可以使用.cache訪問緩存? – 2012-01-12 07:26:24
@ techie_28 - 我不明白你的問題。此代碼會創建圖像對象,並將圖像URL加載到其中。該過程會導致瀏覽器緩存圖像,以便在頁面中的其他位置使用這些圖像URL時,它們將立即從瀏覽器緩存中加載。預加載它們之後,您只需正常使用URL,瀏覽器將自動從緩存中獲取它們。你不會自己訪問緩存 - 瀏覽器會爲你做。 – jfriend00 2012-01-12 07:30:25
我的問題是什麼.cache屬性在這裏? – 2012-01-12 07:32:15