creating plugins

Though I do not want to reinvent the wheel, it piques my interest to improve known mechanics. Just take a look - feedback welcome ;)

running around

Everyday life: Coffee, forms, microsites, daffy functions. To realize my own ideas I started to create this page. I hope you enjoy it.

solving problems

Doesn't it excite us to solve unusual problems? Beside daily grind's drabness it's the perfect diversion. So allow full bent!

LazyLoading

What is it?BENEFITS & MOTIVE

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.

 

FeaturesWHY SHOULD I USE IT?

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

How to useget it up and running


#1

doctype

Make sure you are using valid DOCTYPE. This is required for FancyIndex 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 );
} );

OptionsTIME TO CONFIGURE THINGS?

Easy plugin, easy life. Configure things just to taste :)

$( document ).ready( function( )
{
	$( "body" ).LazyLoading();
} );
Ver.OptionTypeDefaultDescription
1.0hideWhenInactiveboolean Hide index if unwanted
1.0focusInitallyboolean Focus index on load
1.0focusOnResizeboolean Focus index on window resize
1.0focusOnScrollboolean Focus index on scroll
1.0focusOnHoverboolean Focus index on hover
1.0focusTimeoutint Time before setting index inactive
1.0firstOnlyboolean Highlight the first match only
1.0forceLastActiveboolean Highlight the last headline (even if not visible)
1.0scrollOnClickboolean Scroll to desired section once clicked
1.0scrollToDurationint Scroll duration
1.0maxPrioritizedItemsint Number of prioritized items (important for CSS)
1.0flipPositionboolean Pulls index to left screen border



HTML AttributesEven more customization?

Customize single HTML objects

<h2 id="myObject" data-myattribute="myvalue">MyText</h2>
Ver.OptionTypeDefaultDescription
1.0boolean

Comments & Feedback

Gehiks No Homepage

Thanks for the tool which is the most usable I've seen so far but I face a problem: the content of the first called file in data-request is repeated in every other esKju-lazyloading div. How can I fix that?

howno No Homepage

does not work, acts like mad: I expect lazyloading my deffined div with already deffined content not some external file into an empty div, and yet it loads without stopping perpetualy complete site on and on and on...till the browser crashes, waste of time!

Devor No Homepage

Hi, I'm trying to use the function LazyLoading() but I keep receiving that LazyLoad() is not a function in the browser console.
I'm trying to use the function on the entire body so to lazy load the content of the page(if I understood correctly the use of this plugin), like FB.
Thank you!!

afrgun No Homepage

hi, i get problem how to use this plugin when i want use for attribute html.
maybe you can add file index.html to folder download for example..

Thanks in advance
Regards :)

aa No Homepage

nice

studio 42 st42.fr

Hi,
a little mistake in your script, please use an anonymous function and declare jQuery :

(function ($) {
//YOUR CODE HERE
})(jQuery);

i had myself a conflict with jquery and mootools(joomla)

Change the example in this page

$( document ).ready( function( )
{
$( "body" ).LazyLoading();
} );

LazyLoading > esKjuLazyLoading

Thanks for your script.,
Patrick

esKju cwdesigns.de

@Alexander:
A new version with events is available. So if you need callbacks, just write:

$( "#yourContainer" ).bind( "nextPageRequested", function()
{
   // do something as a page is requested
});
$( "#yourContainer" ).bind( "nextPageLoaded", function()
{
   // do something as a page is loaded (ajax completed)
});

I hope this will fix your issue?! :)

Alexander No Homepage

Thanks for your tool. It's pretty awesome.
One question: does ist provide callbacks as well? For my work I need a callback when the content is loaded.

mr.bon funmedia.vn

thank you



Add a comment