如何緩存圖解地圖？

Question

一個網站有一個插圖地圖作爲一箇中心的功能，瀑布像加載在初次訪問。目標是每次用戶訪問給定會話中的頁面時，地圖不應該重新加載。每次用戶想要在給定的會話中導航時，我們如何防止地圖不斷重新加載？

鏈接在這裏：http://thebambergergroup.com/map/murray-hill/nyc

Answer 1

希望我理解這個問題的權利......在這裏去！

快速和骯髒的方式是使用cookie來存儲一些關於用戶是否已加載地圖的狀態，然後使用它來決定地圖應該如何加載（瀑布淡入動畫或一次全部）

因此，當圖像加載完成時（如果您沒有處理完成時間，無論是作弊還是使用定時器，或者假設用戶訪問過在所有頁：

//please don't actually do it this way, 
 
//there are many better libraries to handle cookies 
 
//you'll also want to look at expiry time, etc 
 
function loadImagesFinished(){ 
 
    document.cookie = 'mapLoaded=true'; 
 
}

然後，當你的頁面加載並要決定如何加載圖片：

var haveMapImagesBeenLoaded = getCookie('mapLoaded'); 
 
if (haveMapImagesBeenLoaded){ 
 
    loadImagesWaterfallAnimation(); 
 
} else { 
 
    loadImagesAllAtOnce(); 
 
}

顯然很多過分簡單化的發生，但你的想法。

如果您想要更健壯的方式，您可以使用服務器端會話存儲（如果您的語言支持它，它可能會這樣做）。不過，一般的方法仍然是一樣的。檢查會話是否包含mapLoaded屬性，如果沒有，則設置它並寫出一些內容以向瀏覽器指示它需要使用瀑布動畫加載地圖（不同的HTML，<script>標記中的JS變量，http響應標頭，一個餅乾......任何東西！）。否則，立即加載它！