是否有可能在渲染之前在緩存中插入圖像

我有這個網頁，它顯示了一些圖像和一些圖像在一個mouseover事件上，因此它們需要時間來顯示。我已經通過放置鼠標懸停圖像並通過顯示none屬性將它們放入瀏覽器緩存並在mouseover上快速顯示它們來解決它。我一直在想，可以通過其他方式將圖像插入到瀏覽器的緩存中就像使用jQuery或其他東西，所以我不必將圖像以隱藏的形式。是否有可能在渲染之前在緩存中插入圖像

我不知道這是一個愚蠢的問題。

請評論。

問候人士Himanshu夏爾馬

來源

2012-01-12 techie_28

您可以預先加載圖像，使它們在緩存中，以便它們可以立即用於鼠標事件等。有關預緩存圖像陣列的示例代碼，請參見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);

來源

2012-01-12 07:18:12 jfriend00

我們可以使用.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

你可以使用(new Image).src="http://path/to/img.jpg"這將會使瀏覽器加載它

來源

2012-01-12 07:13:21

這會將圖像放入緩存中嗎？ – 2012-01-12 07:14:31

你的意思是......'新形象（）。src =「」' – 2012-01-12 07:15:20

不，這是有效的。它會使瀏覽器加載並緩存它:) – 2012-01-12 07:20:15

首先，使用精靈的小和/或「鼠標懸停」圖像。另外，是的，你可以用javascript預加載圖片，但記住關於頁面加載順序，所以它可能不會比css更快。

來源

2012-01-12 07:16:17 YuS

是否有可能在渲染之前在緩存中插入圖像

回答

相關問題