img HTML标记不尊重HTTP刷新标头(但在浏览器中加载图像URL)

我正在使用HTTP Refresh标头提供占位符图像,如下所示：

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秒后刷新,但如果我在图像标记src属性中放置相同的URL,则图像永远不会刷新(在Chrome和FF中测试).

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

我不记得是怎么回事,但是在netscape浏览器过去的好时光,像刷新标题这样的东西有时我们是如何破解动画的(甚至在Flash之前 – 我是史前还是什么？).我们称之为“服务器推送”(我猜这个流行语是用Comet model回收的).

我在客户端使用Angular.js(服务器端是Django uWsgi Nginx),所以应该很容易使用javascript破解一些东西,但我很好奇：是否有任何技巧(没有javascript)来制作图像标签在几秒钟后加载另一个源？

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

最佳答案

说明

当您直接在浏览器中打开图像时,它将被包装为HTML文档.

转到谷歌最新的涂鸦jpg然后打开你的HTML控制台(http://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg).

在Chrome中你会得到：

logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg">


对于文档内部的IMG标记src,不会进行“包装”.
解
如果您打算仅使用HTTP标头,那么就会遇到@JamesHolderness描述的multipart / x-mixed-replace,但请注意,将HTTP连接挂起,这会损害您的服务器性能并可能导致您遭受DDoS攻击.
我打算建议使用CSS动画/过渡来延迟加载图像.不幸的是,只有Chrome支持背景图片(CSS属性)动画.另一个选项是display：none,因为在显示元素之前图像不会加载,但是没有浏览器支持在显示上动画或转换(CSS属性).
这是仅限Chrome,仅限CSS的解决方案http://jsfiddle.net/r2Tag/
HTML


CSS

#thumbnail {
    position: relative;
    width: 475px;
    height: 184px;
    background-image:url('http://lh3.ggpht.com/Z9Bl8P_zqvnB_FPBw5PqZlHelALdwWoBV5EZSEVI85kS698xDzghSmLzREcaS1Uh31L5PIRdAiuMUcBSNlBGCsc-9YshQaxnMA4uzU2c-Q');
    animation: loadthumbnail 0s linear 10s;
    -webkit-animation: loadthumbnail 0s linear 10s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}
@keyframes loadthumbnail { to {
    width: 491px;
    height: 190px;
    background-image:url('https://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg');
} }
@-webkit-keyframes loadthumbnail { to {
    width: 491px;
    height: 190px;
    background-image:url('https://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg');
} }

编辑如果您使用数据URI SVG作为背景图像,您可以绕过Chrome的解析器预加载图像.
示例SVG



                
                                原文地址：https://www.jb51.cc/nginx/434498.html
                                 版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

img HTML标记不尊重HTTP刷新标头(但在浏览器中加载图像URL)

相关推荐