Question

我正在使用AngularJS和HTML5服务器端事件（SSE）来不断更新网页中某些数据的显示。作为其中的一部分，我有一个图标来显示与服务器的连接状态。

我使用ng-switch来控制是否显示“已连接”或“已断开连接”图标。这会打开我从SSE onopen和onerror回调修改的$ scope变量。只要服务器仍然能够提供静态HTTP请求，这种方法就可以正常工作。

但是，如果服务器完全关闭，那么我会在浏览器中找到一个缺少图像的占位符，而不是我想要的图像。发生这种情况是因为这是浏览器第一次需要图像，但服务器不再启动，无法提供静态文件。

所以我正在寻找预加载图片的方法，以便浏览器在SSE onerror回调后不需要请求它。我已经尝试了以下内容并且它们无法正常工作，即浏览器仍然请求图像并收到错误：

<script>
    var disconnectedImg = new Image(16, 16);
    disconnectedImg.src = 'static/img/disconnected.png';
</script>

我非常感谢此时的任何想法！在提供图像时，是否需要从服务器设置任何特定的缓存控制标头？

Answer 1

我建议执行bbuecherl建议的操作，并在需要时将图像始终放在带有display: none的DOM中。

您还可以尝试预取图像，使其位于缓存中：