load shows in increments (infinite scroll)

don't lazyload preloaded artwork (first 5 shows)

api.php

@@ -5,7 +5,7 @@ if ($_GET['get'] == 'shows') {
 
 	$sbdb = new SQLite3($sbPath.'/sickbeard.db');
 
-	$shows = $sbdb->query("SELECT tvdb_id AS id, show_name AS name, location FROM tv_shows ORDER BY show_name ASC;");
+	$shows = $sbdb->query("SELECT tvdb_id AS id, show_name AS name, location FROM tv_shows ORDER BY show_name ASC LIMIT ".$_GET['limit']." OFFSET ".$_GET['offset'].";");
 	$output = array();
 	while ($show = $shows->fetchArray()) {
 		$rows = $sbdb->query("SELECT season, COUNT(episode_id) AS count FROM tv_episodes WHERE showid = '".$show['id']."' GROUP BY season ORDER BY season ASC");

css/mediarack.css

@@ -10,6 +10,7 @@ body {
 
 .show {
 	margin-bottom: 50px;
+	min-height: 200px;
 }
 
 .showName.panel-heading {
@@ -49,7 +50,7 @@ table.episodes  tr td{
 }
 
 div.panel-body.lazy {
-	background: url('../img/no_fanart.jpg') repeat-y top center;
+	/* background: url('../img/no_fanart.jpg') repeat-y top center; */
 	background-size: 100% auto;
 }
 

js/mediarack.js

+var showLimit = 5;
+var showOffset = 0;
+var killScroll = false;
+
 $(document).ready(function() {
 
 	getShows();
@@ -10,14 +14,24 @@ $(document).ready(function() {
 		$($(this).attr('href')).show();
 	});
 
+	$(window).scroll(function(){
+		if  ($(window).scrollTop()+1000 >= ($(document).height() - ($(window).height()))){
+			if (killScroll == false) {
+				killScroll = true;
+				getShows();
+			}
+		}
+	});
+
 });
 
 function getShows() {
 	$.getJSON('api.php', {
-		'get': 'shows'
+		'get': 'shows',
+		'limit': showLimit.toString(),
+		'offset': showOffset.toString()
 		}, function(data) {
 			var divShows = $("#shows");
-			divShows.empty();
 			var i = 0;
 			$.each(data, function (key, show) {
 				var divShowContainer = $('<div class="show panel panel-default" data-showid="'+show.id+'" id="show_'+show.id+'"></div>');
@@ -39,34 +53,37 @@ function getShows() {
 					});
 					ulSeasons.append(liSeason);
 				});
-				divShowContainer.append(divShowHeader);
-				divShowBody.append(divShowPoster);
-				divShowBody.append(ulSeasons);
-				$("img.showLogo.lazy").lazyload({
-					event: "scrollstop",
+				$("div.panel-body.lazy").lazyload({
+					//event: "scrollstop",
 					effect: "fadeIn",
-					threshold: 1500
+					threshold: 900
 				});		
-				divShowBody.lazyload({
-					event: "scrollstop",
+				$("img.showPoster.lazy").lazyload({
+					//event: "scrollstop",
 					effect: "fadeIn",
-					threshold: 1800
+					threshold: 850
 				});
-				$("img.showPoster.lazy").lazyload({
-					event: "scrollstop",
+				$("img.showLogo.lazy").lazyload({
+					//event: "scrollstop",
 					effect: "fadeIn",
-					threshold: 1600
+					threshold: 700
 				});
+				divShowContainer.append(divShowHeader);
 				divShowContainer.append(divShowBody);
+				divShowBody.append(divShowPoster);
+				divShowBody.append(ulSeasons);
 				divShowContainer.append(divShowFooter);
 				divShows.append(divShowContainer);
 				if(i < 5) {
-					divShowHeader.find("img.showLogo").attr('src', 'api.php?get=logo&show='+escape(show.folder));
-					divShowBody.css('background-image', 'url(api.php?get=fanart&show='+escape(show.folder)+')');
-					divShowPoster.find("img.showPoster").attr('src', 'api.php?get=poster&show='+escape(show.folder));
+					divShowHeader.find("img.showLogo").attr('src', 'api.php?get=logo&show='+escape(show.folder)).removeClass('lazy');
+					divShowBody.css('background-image', 'url(api.php?get=fanart&show='+escape(show.folder)+')').removeClass('lazy');
+					divShowPoster.find("img.showPoster").attr('src', 'api.php?get=poster&show='+escape(show.folder)).removeClass('lazy');
 				}
 				i++;
 			});
+			showOffset = showOffset+showLimit;
+			killScroll = false;
+			console.log(showOffset);
 		}
 	);
 }