tuupola/jquery_lazyload — pull request #218 by radeksery (2014-09-10 08:45:37+00:00)
Title: Added CSS classes for better styling control

The current version of plugin allows using the effect of image showing only by JS. But when using fadeIn effect on larger amount of images at the same time (10-20 for example), the fade is not smooth. On the mobile browsers, it's even more noticeable. This pull request adds two CSS classes in the specific moment. Using them, you could use CSS3 transitions and transformations for any effect possible. What's more, CSS3 transitions and transforms could be HW accelerated.

In the `load` event of the img, we instantly add class `preloaded` - the image is already loaded, but not yet shown. After the effect function is called, we replace this class by `loaded`. Using this two classes and CSS example below (using LESS syntax), we could achieve the same fade effect, but significantly smoother. In the example, I'm using the ajax preloading image on background, to show users something is happening.

```
&.lazy {
min-width:32px;
min-height:32px;
background:url('/img/bg/ajax.gif') 50% 50% no-repeat;

&.preloaded { opacity:0; }
&.loaded {
min-width:0;
min-height:0;
background:none;
opacity:1;
transition:opacity 500ms ease 0s;
}

.no-js & { display:none; }
}
```

The JS initialization in this case is using default effect (show), but could be combined with for example slideDown function - the image would slideDown (by JS) and at the same time fade (using CSS). You could combine multiple CSS3 effects as well. In addition, using CSS classes, you could create different effects on different images, while calling the lazyload plugin just once. The outcome is more powerful way to affect showing effects, while possibly improving performance.