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响应标头，一个cookie ......任何东西！）。否则，立即加载它！

如何缓存插图地图？

1 个答案: