EsKju's LazyLoading is a tool for loading content just in time in a Facebook-similar style. It was built using the jQuery library. Licensed under MIT and GPL licenses.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
js
CHANGELOG.md
LICENSE
README.md

README.md

esKju's jQuery lazyLoading Plugin

What is it?

EsKju's LazyLoading is a tool for loading content just in time in a Facebook-similar style. It was built using the jQuery library. Licensed under MIT and GPL licenses.

Features

  • Supersedes dowdy paginations
  • Customizable trough settings and CSS
  • Highly compatible
  • Uses CSS3 transitions by default

How to use

1. doctype

Make sure you are using valid DOCTYPE. This is required for LazyLoading to look and function correctly.

<!DOCTYPE html>

2. include files

Loading jQuery from CDN (Content Delivery Network) is recommended. Include all lazyLoading JavaScript and CSS files in addition.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/eskju.jquery.lazyloading.js"></script>
<link rel="stylesheet" href="css/eskju.jquery.lazyloading.css" />

3. html markup

Create a HTML container.
<div id="example1">
	<div class="esKju-lazyloading" data-request="demo/demo.html">
		<!-- The content will be loaded as soons as this container is visible -->
	</div>
</div>

###4. fire plugin using jquery selector

If you are not familiar with jQuery, please, read this tutorial for beginners. Sample examples:

$( document ).ready( function( )
{
	options = {
		container: $( "#example1 .esKju-lazyloading" ), 
		maxPages: 3
	};
	
	new esKjuLazyLoading( options );
} );

5. customize your styles

To create your own fresh look, customize the stylesheet file. Sample examples:

#example1 .esKju-lazyloading
{
	opacity: 0;
	-webkit-transition: all 200ms ease-in-out;
	-moz-transition: all 200ms ease-in-out;
	-o-transition: all 200ms ease-in-out;
	-ms-transition: all 200ms ease-in-out;
	overflow: hidden;
	-webkit-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg );
	-moz-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg );
	-o-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg );
	-ms-transform: scale( 1.05 ) translateY( 100px ) skewY( 3deg );
}

#example1 .esKju-lazyloading-loaded
{
	opacity: 1;
	-webkit-transform: scale( 1 ) translateY( 0px ) skewY( 0deg );
	-moz-transform: scale( 1 ) translateY( 0px ) skewY( 0deg );
	-o-transform: scale( 1 ) translateY( 0px ) skewY( 0deg );
	-ms-transform: scale( 1 ) translateY( 0px ) skewY( 0deg );
}

Author & Help

For more information visit the author's page: