jQuery Lazy Scroll Loading Examples

•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  
•  

Usage:

$(document).ready(function() {
	$("#lazyScrollLoading").lazyScrollLoading({
		lazyItemSelector : ".lazyItem",
		onLazyItemFirstVisible : function(e, $lazyItems, $firstVisibleLazyItems) {
			$firstVisibleLazyItems.each(function() {
				this.innerHTML = this.getAttribute("lazy-text");
			});
		}
	});
});

Usage:

$(document).ready(function() {
	$("#lazyScrollLoading_ImageMode").lazyScrollLoading({
		isDefaultLazyImageMode : true
	});
});

• Scroll my scrollbar

Usage:

$(document).ready(function() {
	var $loger = $("#scrollEventLogger");
	$("#lazyScrollLoading_ScrollEvent").lazyScrollLoading({
		onScrollToTop : function() {
			$loger.append($("<div>on scroll to top</div>"));
		},
		onScrollToBottom : function() {
			$loger.append($("<div>on scroll to bottom</div>"));
		},
		onScrollToLeftmost : function() {
			$loger.append($("<div>on scroll to leftmost</div>"));
		},
		onScrollToRightmost : function() {
			$loger.append($("<div>on scroll to rightmost</div>"));
		}
	});
});

• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item
• Lazy Item

Usage:

$(document).ready(function() {
	var $container = $("#lazyScrollLoading_WindowScrollToEnd");
	$(window).lazyScrollLoading({
		onScrollToBottom : function(e, $lazyItems) {
			$container.append($("<li>New Lazy Item</li>"));
		}
	});
});

• 1. Lazy tree node
• 1.1 Lazy tree node
• 1.2 Lazy tree node
• 1.3 Lazy tree node
• 1.4 Lazy tree node
• 1.5 Lazy tree node
• 1.6 Lazy tree node
• 1.7 Lazy tree node
• 1.8 Lazy tree node
• 1.9 Lazy tree node
• 1.10 Lazy tree node
• 2. Lazy tree node
• 2.1 Loading ...

Usage:

$(document).ready(function() {
	var count = 0;
	$("#lazyScrollLoading_LazyTree").lazyScrollLoading({
		lazyItemSelector : ".loadingPoint",
		onLazyItemFirstVisible : function(e, $lazyItems, $firstVisibleLazyItems) {
			$firstVisibleLazyItems.removeClass("loadingPoint").text($firstVisibleLazyItems.text().replace("Loading ...", "Lazy tree node"));
			for ( var i = 0; i < 14; i++) {
				count++;
				$(this).append($("<li style='padding-left: 30px;'>2." + count + " Lazy tree node</li>"));
			}
			count++;
			$(this).append($("<li style='padding-left: 30px;' class='loadingPoint'>2." + count + " Loading ...</li>"));
			$(this).clearLazyScrollLoadingCachedLazyItems();
		}
	});
});