完全なイメージが読み込まれるのを待っている間、プレースホルダの背景/イメージ？

Question

私のページにはいくつかの画像があります。私は、画像が読み込まれる前にレンダリングが始まりますが、視覚的効果はそれほど大きくないことを発見しました。私は正確に幅をのグレーの背景画像を表示することができる簡単な方法はあり

--------hr-------- 
[   ] 
[ image ] 
[   ] 
text 

：

--------hr-------- 
text 

その後数ミリ秒後にページがこれを表示するためにジャンプ：最初のユーザーが、この見ています画像自体が読み込まれるまで、画像が占有する高さはですか？

複雑な要因は、画像の高さと幅があらかじめわかっていないことです。反応しやすく、含まれているdivのwidth: 100%に設定されています。これは、HTML/CSSです：

<div class="thumbnail"> 
<img src="myimage.jpeg" /> 
<div class="caption">caption</div> 
</div> 
img { width: 100% } 

は、ここで基本的な問題を説明するためにJSFiddleです：http://jsfiddle.net/X8rTB/3/

私はLazyLoadのようなものに見えてきましたが、私は単純に存在する必要があります感じて助けることができません、非JS回答。それとも、私はあまりイメージされていない問題は、イメージの高さを知らないという事実ですか？私は画像のアスペクト比を知っています。

Answer 1

あなたのテキストにジャンプ効果を最小限に抑えるために考えられる唯一のことは、画像が表示される場所にmin-heightを設定することです。あなたが知っている「短い」画像に設定します。この方法でジャンプがあまり明白にならず、lazyLoadなどを使う必要はありません。しかし、あなたの問題を完全には解決しません。

Answer 2

代わりの画像を直接参照する、DIV以内にそれを貼り付け、次のように：

<div class="placeholder"> 
    <div class="myimage" style="background-image: url({somedynamicimageurl})"><img /></div> 
</div> 

その後、あなたのCSSで：

.placeholder { 
    width: 300; 
    height: 300; 
    background-repeat: no-repeat; 
    background-size: contain; 
    background-image: url('my_placeholder.png'); 
} 

Answer 3

あなたの前にチェックするために本当に簡単なことがあります遅延ロードやその他のJSを調べ始める。 [プログレッシブ]オプションを有効にして、読み込んでいるJPGイメージが保存されていることを確認してください。 これは、レンダリング前に最高のresデータを待つのではなく、低解像度でダウンロードが速いプレースホルダーから始めて、イメージを繰り返しロードします。

Answer 4

ここでそれを行うの素朴な方法です、

IMG { ボックスシャドウ：0 0 0 10pxのRGBA（＃000、0.1）。 }

値を操作することはできますが、内容をプッシュしないイメージの周りに非常に明るい境界線が作成されます。画像はいつでも好きなときに読み込むことができ、ユーザーエクスペリエンスが向上します。

希望すること