Load images with Lazy Load

Download lazy load and add it to the <head> section of your page.

<div id="placeHolder"></div>

<ul id="container">
	<li data-genre="Drama, Sci-Fi, Thriller" data-actors="Harrison Ford, Rutger Hauer, Sean Young, Edward James Olmos" data-director="Ridley Scott">
		... <img src="film.png" data-original="img/movies/BladeRunner.jpg" /> ...
	</li>
	<li data-genre="Action, Crime, Drama, Thriller" data-actors="Christian Bale, Michael Caine, Ken Watanabe, Liam Neeson" data-director="Christopher Nolan">
		... <img src="film.png" data-original="img/movies/BatmanBegins.jpg" /> ...
	</li>
	<li data-genre="Drama" data-actors="Mark Wahlberg, Julianne Moore, Burt Reynolds, Luis Guzmán" data-director="Paul Thomas Anderson">
		... <img src="film.png" data-original="img/movies/BoogieNights.jpg" /> ...
	</li>
	...
</ul>
/*
    Extend jQuery with an "inview" selector to 
    select elements that are in the visible
	part of the page (at least partiacialy) 
*/
$.extend($.expr[':'], {
    inview: function(el) {
    	var e = $(el),
		w = $(window),
		wt = w.scrollTop(),
		wb = wt + w.height(),
		et = e.offset().top,
		eb = et + e.height();

		return ( (eb >= wt) && (et <= wb) );
    }
});

$("ul#container img").lazyload({ 
    event : "scroll filter",
    effect : "fadeIn"
});

$.filtrify("container", "placeHolder", {
	block : "data-original",
	callback : function( query, match, mismatch ) {
		$(match).find("img:inview").trigger("filter");
	}
});