実際のコンテンツを読み込む前に小さなプレースホルダー画像を読み込む方法

Question

http://www.e-flux.comに示すように画像読み込みスタイルに関する質問があります。このウェブサイトは、まず、実際の画像を表示する前に、（ランダムに）特定のパターンの画像を読み込みます。私の推測では、これは視覚的に満足のいくコンテンツを持っていて、合計のWebサイトをロードしていることさえあるということです。

私はソースコードを見て、 "lazy is-loading"のクラスを持っているのを見ました。私はそれが何かをしなければならないと思う。

私はこの効果を再現したいと思いますし、プログレッシブ画像などについていくつかの調査をしました。また、このWebサイト： 'css-tricks.com the blur-up-technique-for-loading-background-images /'では、小さな画像を最初にロードし、実際の画像がダウンロードされるまでローディング時間を低く保つようにぼかしています。

しかし、私は彼らがhttp://www.e-flux.comでこのトリックをした方法を見つけることができないようです。

すべての情報に感謝します！そのソースを見ると、そのはdiv要素の上に配置さbackground-imageスプライト、使用して行わ

Answer 1

- 最終的にロードされていた画像と一緒に..：

<div class="lazy-placeholder item-image-wrapper-bg6" style="width: 512px"></div> 

と

.item-image-wrapper-bg6 { 
    background-image: url(../elements/bg-6.gif?2); 
    background-size: 85px; 
}