"src"属性を持つレイジーローディンググレーの背景イメージを変更する

Question

私はLazy Load jQuery PluginをMika Tuupolaによって使用しています。

動作するには以下のマークアップが必要です。

<img class="lazy" data-original="img/example.jpg"> 

私は場所がたくさん検索しましたが、どれも属性は仕事のやり方記述で明らかにされていない：私は何をすべき、デフォルトのグレー以外ながら、ローディングの背景を作成するには

を？ "src"に1 x 1の白いgifを入力しますか？ここでベストプラクティスは何ですか？

私はこれを行うための最善の方法は、以下のマークアップであると思い

Answer 1

Three approaches you can follow 

1. Lazy load with grey background 
2. Add low resolution image (blurry) to the 'src' 
3. Add loader gif to the 'src'` 



Examples 

1. https://jsfiddle.net/Guffa/u7bcms27/ 
2. http://dinbror.dk/blazy/?ref=blog 
3. http://afarkas.github.io/lazysizes/#examples 
4. http://codepen.io/afasterweb/pen/dpbdyN 

Answer 2

：

<img class="lazy" src="img/pixel.png" data-original="img/example.jpg"> 

example.jpgがロードされている間pixel.pngは、いつものようにロードし、超小型サイズの画像です画像がビューポートに入るとき。

通常の読み込みのためのピクセルサイズのイメージを持つことは、初期ページ読み込み時間を減らし、帯域幅の消費を減らすために、遅延読み込みの概念になります。

Photoshopを使用せずにピクセルを簡単にonlineに生成できます。