通過ajax手動緩存圖像？

Question

所以我有一個3頁的網站有非常豐富的背景，我想知道是否有可能通過AJAX在手冊頁上手動緩存圖像，以便當用戶進入新頁面時，大圖像已經加載。

我正在使用rails/turbolinks。我知道一定有辦法，但我想知道是否有人知道最佳做法。

Answer 1

是的，這是可能的。

使用後，頁面加載事件（避免緩存圖片減緩當前頁面的速度時間）一個$ .load功能，如：

$(document).load(function() { 
    $.load("www.domain.com.br/img/image-to-pre-cache.jpg"); 
}); 

這應該工作...但是，如果不工作時，你也可以使用

$(document).load(function() { 
    $('<img/>')[0].src = "www.domain.com.br/img/image-to-pre-cache.jpg"; 
}); 

Answer 2

這裏是你如何能解決你的問題：

的JavaScript：有一個相當不錯的一篇名爲Simple Asset Management誰描述了一個非常好的預加載機制。當你有一個巨大的資產清單時，建議使用它，而且你不能一次全部下載它。

CSS：還有CSS technique，你描述了所有圖像，你想要在你的CSS預加載，並將其餘的瀏覽器。

HTM5：如果你需要一個HTML5的做法，HTML5已經有一個名爲的rel = 「預取」 新屬性：

<link rel="prefetch" href="http://asset.to.prefetch/imgs/sprite.png" /> 

More about HTML5 rel prefetch

希望它能幫助。