CODEWITHSUNDEEP
jqueryhtmlimagelazy-loading
iWillGetBetter
iWillGetBetter

Reputation: 800

Changing lazy loading grey background image with "src" attribute

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?

Upvotes: 1

Views: 2119

Answers (2)

iWillGetBetter
iWillGetBetter

Reputation: 800

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.

Upvotes: 1

Arun Ravilla
Arun Ravilla

Reputation: 93

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

Upvotes: 3

Related Questions