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

Question

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

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

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

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

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

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

Answer 1

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

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

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

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

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

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