我正在使用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)来制作图像标签在几秒钟后加载另一个源？
当您直接在浏览器中打开图像时,它将被包装为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
