html - img HTML 标签不支持 HTTP Refresh header (但在浏览器中加载图像 URL)

Question

我正在提供带有 HTTP 刷新 header 的占位符图像，如下所示:

Connection:keep-alive
Content-Type:image/gif
Date:Thu, 01 Aug 2013 14:16:25 GMT
Refresh:10; url=/media/thumbs/document/18.png
Server:nginx/1.4.1
Transfer-Encoding:chunked

如果我在整个窗口中加载图像占位符 URL，内容会在 10 秒后刷新，但如果我将相同的 URL 放在图像标记 src 属性中，图像永远不会刷新(在 Chrome 和 FF 中测试)。

我为什么要这样做？我有一个应用程序，其中文档的缩略图需要几秒钟才能由服务器生成(这是一个复杂的 SVG 渲染)。当用户在创建新文档后立即转到文档列表时，缩略图可能还不存在。我试图在几秒钟后使用带有刷新标题的占位符图像来加载真实缩略图。

我不记得是如何做到的，但在 Netscape 浏览器的美好时光里，刷新 header 之类的东西有时是我们破解动画的方式(甚至在 Flash 出现之前——我是史前时代还是什么？)。我们称其为“服务器推送”(我猜这个流行语是用 Comet model 回收的)。

我在客户端使用 Angular.js(服务器端是 Django+uWSGI+Nginx)，所以使用 javascript 破解一些东西应该很容易，但我很好奇:有什么技巧吗(没有 javascript)使图像标记在几秒钟后加载另一个来源？

(我也会标记这个 Django 和 Nginx，因为可能有人知道服务器端解决方案)

Answer 1

如果您不需要支持 IE，并且您的 svg 生成时间不会太长以至于会导致连接超时，您可以使用 multipart/x 的 Content-Type 实现类似的效果-混合替换。像这样:

Content-Type: multipart/x-mixed-replace; boundary=myboundary

对于您的实际内容，您首先要像这样写出占位符图像:

--myboundary
Content-Type: image/jpeg
Content-Length: <size of the image in bytes>

<binary image data + CR/LF>

然后立即刷新输出，但保持连接有效(即这将使用分 block 传输编码)。

现在你可以开始生成你的 svg 了，当它完成后，像这样写出来:

--myboundary
Content-Type: image/svg+xml
Content-Length: <size of the image in bytes>

<svg image data + CR/LF>
--myboundary--

基本上就是这样streaming M-JPEG有效，仅在这种情况下帧不全是 jpeg 图像。