I am using Lazy Load jQuery Plugin by Mika Tuupola.
It requires the following markup to work.
<img class="lazy" data-original="img/example.jpg">
I have searched alot of places but none are clear in describing the way the attributes work:
To create a while-loading background other than the default grey one, what should I do? Input "src" with a 1 x 1 white gif? What is the best practice here?
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
I think the best way to do this is by the following markup:
<img class="lazy" src="img/pixel.png" data-original="img/example.jpg">
The pixel.png is a super small size image that loads as usual, while the example.jpg is loaded when picture comes into viewport.
Having a pixel sized image for the normal loading goes with the concept of lazy loading, which is to decrease initial page load time and reduce bandwidth consumption.
Pixels can be generated easily online without using Photoshop.