在单页应用程序中预加载图像

时间:2014-01-30 06:46:57

标签: javascript image node.js caching

我有一个用NodeJS编写的单页Ajax应用程序非常关于错误处理。如果与服务器的连接下降100%,小部件将有一个"重新加载我"叠加,单击时,将尝试重新加载小部件/

我遇到的问题是这种情况:

  • 应用程序加载正常
  • 我杀了服务器
  • 我点击创建小部件的内容
  • "重新加载"窗口小部件顶部的图标不会显示,因为...好吧,客户端尝试从服务器上获取它,但由于服务器已关闭,图像显然无法获取!

可以将图片放在不同的服务器上,但我不想走这条路,因为它有点过分。

我尝试将<img src="/app/hotplate/hotDojoWidgets/reload.png"></img>放在应用页面的顶部,但客户不会考虑它 - 它会尝试重新加载。

我该怎么办,以便小部件始终显示图像?

1 个答案:

答案 0 :(得分:0)

一旦请求进入死机服务器,我就无法看到你如何通过超时和破坏的图片逃脱。

避免服务器缓存验证的常用方法是设置标题,如下所示:
Cache-Control:public; max-age=现在+ 1年 Expires:现在+ 1年 没有Etag:Last-modified:只会触发验证的风险 (他们应该被max-age和/或Expires指令保护&#34;但是一些异国情调的浏览器可能会试图验证它们)。

但是,浏览器是免费的,可以从缓存中转储任何对象(如果缓存已满,而且这个特定对象被认为太笨重和/或不适合用于缓存)。

单独摆弄HTTP标头不能100%保证您的浏览器不会请求给定的对象。

系统地避免链接断开的唯一方法是直接控制浏览器的缓存行为。

如果您正在使用HTML5,cache manifests可能就是解决方案。