説明
ブラウザーで画像を直接開くと、画像は HTML ドキュメントとしてラップされます。
Google の最新の Doodle jpg に移動し、HTML コンソール ( http://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg )を開きます。
Chrome では次のようになります。
<html><body style="margin: 0px;">
<img style="-webkit-user-select: none" src="http://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg">
</body></html>
この「ラッピング」は、ドキュメント内にある IMG タグ src に対しては行われません。
解決
HTTP ヘッダーのみを使用するつもりなら、@JamesHolderness で説明されている multipart/x-mixed-replace に固執していますが、このように HTTP 接続を開いたままにしておくと、サーバーのパフォーマンスが低下し、潜在的に DDoS 攻撃を受ける可能性があることに注意してください。 .
CSS アニメーション / トランジションを使用して画像を遅延ロードすることを提案するつもりでした。残念ながら、背景画像 (CSS プロパティ) アニメーションをサポートするのは Chrome だけです。もう 1 つのオプションは display: none です。これは、要素が表示されるまで画像が読み込まれないためですが、ディスプレイ (CSS プロパティ) でのアニメーションまたはトランジションをサポートするブラウザーはありません。
これはChromeのみ、CSSのみのソリューションですhttp://jsfiddle.net/r2Tag/
HTML
<div id="thumbnail"></div>
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');
} }
EDITデータURI SVGをアニメーション化する背景画像として使用すると、画像を事前にロードするChromeのパーサーを回避できます。
サンプル SVG
<svg x="0px" y="0px" width="491px" height="190px" viewbox="0 0 491 190" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"><image externalResourcesRequired="true" xmlns="http://www.w3.org/2000/svg" x="0%" y="0%" height="100%" width="100%" xlink:href="https://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg" xmlns:xlink="http://www.w3.org/1999/xlink"/></svg>
background-image: url('data:image/svg+xml;base64,PHN2ZyB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjQ5MXB4IiBoZWlnaHQ9IjE5MHB4IiB2aWV3Ym94PSIwIDAgNDkxIDE5MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB2ZXJzaW9uPSIxLjEiIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48aW1hZ2UgZXh0ZXJuYWxSZXNvdXJjZXNSZXF1aXJlZD0idHJ1ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4PSIwJSIgeT0iMCUiIGhlaWdodD0iMTAwJSIgd2lkdGg9IjEwMCUiIHhsaW5rOmhyZWY9Imh0dHBzOi8vd3d3Lmdvb2dsZS5jb20vbG9nb3MvZG9vZGxlcy8yMDEzL2Vyd2luX3NjaHJkaW5nZXJzXzEyNnRoX2JpcnRoZGF5LTIwMDIwMDctaHAuanBnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIvPjwvc3ZnPg==');
