仍然會下載並緩存帶有style =“display：none”的圖像嗎？

Question

我正試圖找出一種方法來緩存我的圖庫腳本中的下一個和上一個圖像......我想知道這是否是一個很好的方法。 另外，有沒有辦法手動指定下載圖像的緩存時間？

Answer 1

display: none圖像將被下載並緩存在客戶端上。 但是，JavaScript已經有一種明確定義的預加載圖像的方式：

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

這將預加載圖像而不將其顯示給用戶。

Answer 2

我不確定display: none （它可能因瀏覽器而異）的緩存行為，但是你可以通過在JavaScript中創建圖像對象來將圖像放入瀏覽器的緩存而不顯示它。 在將圖像添加到頁面之前，圖像不會顯示。

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

關於“有沒有辦法手動指定下載圖像的緩存時間？”，有，但這是在HTTP響應中處理的，它將圖像傳遞給瀏覽器。 谷歌有一個很好的入門： https ： //developers.google.com/speed/articles/caching

Answer 3

我認為它將被下載，因此被緩存，因為圖像可能在CSS到達之前加載。

如果瀏覽器過於聰明，就像position:absolute; left:-9999px; top:-9999px position:absolute; left:-9999px; top:-9999px position:absolute; left:-9999px; top:-9999px應該是一個不錯的選擇。