使用「src」屬性更改延遲加載的灰色背景圖像

Question

我正在使用Mika Tuupola的Lazy Load jQuery Plugin。

它需要以下標記才能起作用。

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

我已經搜索了很多的地方，但沒有一個是在描述屬性的工作方式明確：

要創建比默認的灰色以外的，而裝載的背景下，我該怎麼辦？用1 x 1白色gif輸入「src」？這裏最好的做法是什麼？

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"> 

的pixel.png是一個超小尺寸的圖像加載像往常一樣，而example.jpg是裝當圖片進入視口時。

擁有像素大小的圖片以進行正常加載時，採用延遲加載的概念，即延長初始頁面加載時間並減少帶寬消耗。

像素可以很容易地生成online而不使用Photoshop。