WP-Mix

I use Lazy Load for the sweet animated effects at Plugin Planet. Here are some code snippets for future reference.

Basically these snippets are the “initialization” part of dialing in Lazy Load. Including the Lazy Load script is easy, and fashioning the markup is straightforward, but for whatever reason I was grappling with initialization. After getting it working, I told myself, “post the snippets for others to play with”, so here they are without further ado.

First, I tried this:

$(function() {
	$('.feature-details').show();
	$('div.lazy').show().lazyload({
		effect : 'fadeIn',
	});
});
$(window).bind('load', function() { 
	var timeout = setTimeout(function() {
		$('img.lazy').show().lazyload({
			skip_invisible : false,
		});
	}, 5000);
	
});

Then this:

$(function() {
	$('.feature-details').show();
	$('div.lazy').show().lazyload({
		effect : 'fadeIn',
		threshold : 200,
	});
});
$(window).bind('load', function() { 
	if (typeof($('div.lazy').lazyload) === "function") {
		var timeout = setTimeout(function() {
			//$('img.lazy').unveil();
		}, 1000);
	}
});

And finally ended up rolling with this:

jQuery(document).ready(function($) {
	$('.feature-details').insertAfter($('.feature-filter'));
	$('.feature-details').show();
	$('.last').on('load', function() {
		$('.lazy').live().unveil();
	});
});

There’s no need to explain what the code is doing, as this post is aimed at those who find themselves in the same boat that I was in: namely, you’ve read all the documentation, have tried all the solutions posted online, and just need some new tricks to experiment with. If, on the other hand, you’re staring at this code wondering “wtf?”, stop and begin with the Lazy Load documentation. Then work your way from there — hopefully you won’t even need to mess.

To see the working implementation that I ended up with, view source codes at Plugin Planet (the “Features” section).

Bonus: Check if Lazy Load is working

As a bonus, here is a script for quickly checking if Lazy Load (or any function) is loaded and working on the page:

typeof($("img").lazyload) === "function"

To use this snippet, crack open the JavaScript console in your favorite browser (e.g., Chrome, Firefox) and execute directly. Return values will indicate “true” or “false”.