2010-01-30 66 views
14

我試圖找出一種方法來緩存我的畫廊腳本中的下一個和以前的圖像......我想知道這是否是一個很好的方法來做到這一點。另外,有沒有辦法爲下載的圖像手動指定緩存時間?是否仍會下載並緩存style =「display:none」的圖像?

+0

這是可能的JavaScript,但我更喜歡這個解決方案更好(如果它的作品)。 – Thomas 2010-01-30 19:12:03

回答

33

display: none圖像將被下載並緩存在客戶端上。然而,JavaScript的已經有一個明確的預載圖片的方式:

var nextImage = new Image(); 
    nextImage.src = "your-url/newImage.gif"; 

這將預加載圖像沒有它顯示給用戶。

1

我認爲它會被下載,並因此被緩存,因爲圖像可能會在CSS甚至到達之前被加載。

如果瀏覽器變得太聰明,像position:absolute; left:-9999px; top:-9999px應該是一個不錯的選擇。

+2

不能說我是他的黑客粉絲。 – Finglas 2010-01-30 20:00:14

+0

這是一個黑客行爲。幸運的是,似乎沒有必要。但不再需要CSS黑客的日子確實是一個快樂的日子...... – Thomas 2010-01-30 20:03:46

2

我不確定緩存行爲與display: none(它可能會在不同的瀏覽器之間有所不同),但您可以通過在JavaScript中創建圖像對象來顯示圖像到瀏覽器的緩存中,而不顯示它。直到您將其添加到頁面後,圖像纔會顯示。

var image = new Image(); 
image.src = 'example.com/image' 

關於「有什麼辦法來手動指定緩存時間下載圖像?」,有,但是這涉及在圖像傳送到瀏覽器中的HTTP響應。谷歌有一個很好的入門:https://developers.google.com/speed/articles/caching