Light Lazy Loader is delays loading of images in long web pages. Images outside of viewport are not loaded until user scroll (vertically or horizontally), resize, click, see css3 animation.

Using Light Lazy Loader make the page load faster - user is able to see content as soon is possible.

Usage

Load the script:


              <script src="LightLazyLoader.js"></script>

Replace all images to span with class .lazy-image, with data-src attribute where data-src is link to image.


              <span data-src="link-to-image" class="your classes lazy-image"></span>

Probably you will need add extra styles for .lazy-image or use default styles with css3 spinner.

In case you need to load images from custom event.Run


              window.LLIistance.checkElements();

Why is this one cool ?

No dependencies - You only need to include script with LLI nothing more.

Detecting CSS3 transition/transforms and Attributes change - Your old Lazy Image Plugin won't work with your great new slider or you need to write extra callbacks to get it to work? No worries LLI will handle that - no callbacks.

Dynamic elements support - You're adding new images via AJAX ? No worries. LLI is looking for mutations in your DOM.

CSS3 icon - No extra requests for gif with placeholder image.

Is simple- look at the source ;-)

Demos

Lazy Loading with FlexSlider

Lazy Loading Horizontal Scroll

Appended elements demo

Just a lot of images ;-)