====== Adding Style to Your Lazy-Loaded Images ======

As useful as the [[litespeed_wiki:cache:lscwp:configuration:media|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.

===== Example Code =====

The following CSS can be used to create a "fade-in" effect for your lazy-loaded images:

<code>
/* 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;
}
</code>

===== How Does it Work? =====

The key is in the ''data-lazyloaded'' [[https://css-tricks.com/attribute-selectors/|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.