As useful as the Lazy Load ability is, it can be inelegant to have the images just appear suddenly. You can improve upon this with CSS3, and give the loading images a fade-in (or other) effect.
Please note: if the browser does not support CSS3, the following code will be ignored.
The following CSS can be used to create a “fade-in” effect for your lazy-loaded images:
/* PART 1 - Before Lazy Load */ img[data-lazyloaded]{ opacity: 0; } /* PART 2 - Upon Lazy Load */ img.litespeed-loaded{ -webkit-transition: opacity .5s linear 0.2s; -moz-transition: opacity .5s linear 0.2s; transition: opacity .5s linear 0.2s; opacity: 1; }
The key is in the data-lazyloaded
attribute selector, which is a method for targeting elements based on their given attributes.
Before an image is lazy loaded, it has the data=“lazyloaded”
attribute associated with it, which enables PART 1 of the CSS code.
Once the image is loaded, that attribute goes away, PART 1 is no longer relevant, and PART 2 of the CSS code goes into effect. This example CSS causes the image to fade in, but you can replace the code with any CSS effect you wish.