From 5eef5a594c8874921a0beae5bafe107b27b94010 Mon Sep 17 00:00:00 2001
From: Bas Stottelaar <basstottelaar@gmail.com>
Date: Wed, 17 Sep 2014 01:38:49 +0200
Subject: [PATCH] Implemented unveil plugin. Load images only when shown on
 screen

---
 data/interfaces/default/index.html         | 233 ++++++++++-----------
 data/interfaces/default/js/script.js       |  15 +-
 data/interfaces/default/searchresults.html |  47 +++--
 data/interfaces/default/upcoming.html      |   4 +-
 data/js/libs/jquery.unveil.min.js          |   1 +
 5 files changed, 155 insertions(+), 145 deletions(-)
 create mode 100644 data/js/libs/jquery.unveil.min.js

diff --git a/data/interfaces/default/index.html b/data/interfaces/default/index.html
index 3ef3679e..8d25af48 100644
--- a/data/interfaces/default/index.html
+++ b/data/interfaces/default/index.html
@@ -24,129 +24,128 @@
 </%def>
 
 <%def name="javascriptIncludes()">
+    <script src="js/libs/jquery.unveil.min.js"></script>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
-	function initThisPage() {
-		$('#artist_table').dataTable({
-			"bDestroy": true,
-			"aoColumnDefs": [
-			      { 
-                    "bSortable": false, 
-                    "aTargets": [ 0 ],
-                    "mData":"ArtistID",
-                    "mRender": function ( data, type, full ) {
-                        return '<div id="artistImg"><img class="albumArt" alt="" id="'+ data + '" src="artwork/thumbs/artist/' + data + '"/></div>';
-                    }
-                   },
-                   {
-                   "aTargets":[1],
-                   "mDataProp":"ArtistSortName",
-                   "mRender":function (data,type,full) {
-                        
-                        return '<span title="' + full['ArtistID'] + '"></span><a href="artistPage?ArtistID=' + full['ArtistID'] + '">' + full['ArtistName'] + '</a>'
+    	function initThisPage() {
+    		$('#artist_table').dataTable({
+    			"bDestroy": true,
+    			"aoColumnDefs": [
+                    {
+                        "bSortable": false,
+                        "aTargets": [0],
+                        "mData":"ArtistID",
+                        "mRender": function ( data, type, full ) {
+                            return '<div id="artistImg"><img class="albumArt" alt="" id="'+ data + '" data-src="artwork/thumbs/artist/' + data + '"/></div>';
                         }
-                   },
-                   {"aTargets":[2],"mDataProp":"Status"},
-                   {
-                   "aTargets":[3],
-                   "mDataProp":"LatestAlbum",
-                   "mRender":function(data,type,full){
-                        artist = full;
-                        if (artist['ReleaseDate']  && artist['LatestAlbum'])
-                        {
-                            releasedate = artist['ReleaseDate'];
-                            albumdisplay = '<i>' + artist['LatestAlbum'] + '</i> (' + artist['ReleaseDate'] + ')';
-                        }
-                        else if(artist['LatestAlbum'])
-                        {
-                            releasedate = '';
-                            albumdisplay = '<i>' + artist['LatestAlbum'] + '</i>';
-                        }
-                        else
-                        {
-                            releasedate = '';
-                            albumdisplay = '<i>None</i>';
-                        }
-                        if (artist['ReleaseInFuture'] === 'True')
-                        {
-                            grade = 'gradeA';
-                        }
-                        else
-                        {
-                            grade = 'gradeZ';
-                        }
-                        artist['Grade'] = grade;
-                        return '<span title="' + releasedate + '"></span><a href="albumPage?AlbumID=' + full['AlbumID'] + '">' + albumdisplay + '</a>'
-                   }
-                   
-                   
-                   },
-                   {
-                   "aTargets":[4],
-                   "mDataProp":"HaveTracks",
-                   "mRender":function(data,type,full){
-                        if(full['TotalTracks'] > 0)
-                        {
-                            percent = (full['HaveTracks']*100.0)/full['TotalTracks']
-                            if(percent > 100){
-                                percent = 100;
-                            }
-                        }
-                        else
-                        {
-                            full['TotalTracks'] = '?';
-                            percent = 0;
-                        }                      
-                        
-                        return '<span title="' + percent + '"></span><div class="progress-container"><div style="width:' + percent + '%"><div class="havetracks">' + full['HaveTracks'] + '/' + full['TotalTracks'] + '</div></div></div>';
-                   
-                   }},
-                   
-                 ],
-			
-			"oLanguage": {
-				"sSearch": "",
-                "sLengthMenu":"Show _MENU_ artists per page",
-					"sInfo":"Showing _START_ to _END_ of _TOTAL_ artists",
-					"sInfoEmpty":"Showing 0 to 0 of 0 artists",
-					"sInfoFiltered":"(filtered from _MAX_ total artists)",
-					"sEmptyTable": " ",
                     },
-			"bStateSave": true,
-			"iDisplayLength": 50,
-			"sPaginationType": "full_numbers",
-            "bProcessing": true,
-            "bServerSide": true,
-            "sAjaxSource": 'getArtists.json',
-            "fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ){
-                                    $('td', nRow).closest('tr').addClass(aData['Grade'])
-                                    nRow.children[0].id = 'albumart';
-                                    nRow.children[1].id = 'name';
-                                    nRow.children[2].id = 'status'
-                                    nRow.children[3].id = 'album'
-                                    nRow.children[4].id = 'have'
-                                    return nRow;
-                                    },
-            "fnServerData": function ( sSource, aoData, fnCallback ) {
-                /* Add some extra data to the sender */
-                $.getJSON( sSource, aoData, function (json) {    fnCallback(json)                }  )
+                    {
+                       "aTargets":[1],
+                       "mDataProp":"ArtistSortName",
+                       "mRender":function (data,type,full) {
+                            return '<span title="' + full['ArtistID'] + '"></span><a href="artistPage?ArtistID=' + full['ArtistID'] + '">' + full['ArtistName'] + '</a>'
+                        }
+                    },
+                    {
+                        "aTargets":[2],"mDataProp":"Status"
+                    },
+                    {
+                       "aTargets":[3],
+                       "mDataProp":"LatestAlbum",
+                       "mRender":function(data,type,full){
+                            artist = full;
+                            if (artist['ReleaseDate']  && artist['LatestAlbum'])
+                            {
+                                releasedate = artist['ReleaseDate'];
+                                albumdisplay = '<i>' + artist['LatestAlbum'] + '</i> (' + artist['ReleaseDate'] + ')';
+                            }
+                            else if(artist['LatestAlbum'])
+                            {
+                                releasedate = '';
+                                albumdisplay = '<i>' + artist['LatestAlbum'] + '</i>';
+                            }
+                            else
+                            {
+                                releasedate = '';
+                                albumdisplay = '<i>None</i>';
+                            }
+                            if (artist['ReleaseInFuture'] === 'True')
+                            {
+                                grade = 'gradeA';
+                            }
+                            else
+                            {
+                                grade = 'gradeZ';
+                            }
+                            artist['Grade'] = grade;
+                            return '<span title="' + releasedate + '"></span><a href="albumPage?AlbumID=' + full['AlbumID'] + '">' + albumdisplay + '</a>'
+                        }
+                   },
+                   {
+                       "aTargets":[4],
+                       "mDataProp":"HaveTracks",
+                       "mRender":function(data,type,full){
+                            if(full['TotalTracks'] > 0)
+                            {
+                                percent = (full['HaveTracks']*100.0)/full['TotalTracks']
+                                if(percent > 100){
+                                    percent = 100;
+                                }
+                            }
+                            else
+                            {
+                                full['TotalTracks'] = '?';
+                                percent = 0;
+                            }
+
+                            return '<span title="' + percent + '"></span><div class="progress-container"><div style="width:' + percent + '%"><div class="havetracks">' + full['HaveTracks'] + '/' + full['TotalTracks'] + '</div></div></div>';
+                        }
+                    },
+                ],
+    			"oLanguage": {
+    				"sSearch": "",
+                    "sLengthMenu":"Show _MENU_ artists per page",
+    				"sInfo":"Showing _START_ to _END_ of _TOTAL_ artists",
+    				"sInfoEmpty":"Showing 0 to 0 of 0 artists",
+    				"sInfoFiltered":"(filtered from _MAX_ total artists)",
+    				"sEmptyTable": " ",
                 },
-            "fnInitComplete": function(oSettings, json) 
-            {
-            }});
+    			"bStateSave": true,
+    			"iDisplayLength": 50,
+    			"sPaginationType": "full_numbers",
+                "bProcessing": true,
+                "bServerSide": true,
+                "sAjaxSource": 'getArtists.json',
+                "fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull) {
+                    $('td', nRow).closest('tr').addClass(aData['Grade'])
+                    nRow.children[0].id = 'albumart';
+                    nRow.children[1].id = 'name';
+                    nRow.children[2].id = 'status'
+                    nRow.children[3].id = 'album'
+                    nRow.children[4].id = 'have'
+                    return nRow;
+                },
+                "fnServerData": function ( sSource, aoData, fnCallback ) {
+                    /* Add some extra data to the sender */
+                    $.getJSON( sSource, aoData, function (json) {    fnCallback(json)                }  )
+                    },
+                "fnInitComplete": function(oSettings, json)
+                {
+                }
+            });
+            $('#artist_table').on("draw.dt", function () {
+                $("img").unveil();
+            });
 
-            
+    		resetFilters("artist or album");
+    	}
 
-		resetFilters("artist or album");
-	}
-	
-	$(document).ready(function() {
-		initThisPage();
-	});
-	$(window).load(function(){
-		initFancybox();
-		refreshLoadArtist();
-	});
+    	$(document).ready(function() {
+    		initThisPage();
+    	});
+    	$(window).load(function(){
+    		initFancybox();
+    		refreshLoadArtist();
+    	});
 	</script>
-	
 </%def>
diff --git a/data/interfaces/default/js/script.js b/data/interfaces/default/js/script.js
index 7ab97476..25e194a8 100644
--- a/data/interfaces/default/js/script.js
+++ b/data/interfaces/default/js/script.js
@@ -67,14 +67,14 @@ function getInfo(elem,id,type) {
 	});
 }
 
-function getImageLinks(elem,id,type) {
+function getImageLinks(elem,id,type,unveil) {
 	if ( type == 'artist' ) {
 		var infoURL = "getImageLinks?ArtistID=" + id;
 	} else {
 		var infoURL = "getImageLinks?AlbumID=" + id;
 	}
 
-	// Get Data from the cache by ID 	
+	// Get Data from the cache by ID
 	$.ajax({
 		url: infoURL,
 		cache: true,
@@ -97,12 +97,19 @@ function getImageLinks(elem,id,type) {
 			else {
 				var artwork = data.artwork;
 			}
-			$(elem).attr("src", thumbnail);
+
+			if (unveil) {
+				$(elem).attr("data-src", thumbnail);
+				$(elem).unveil();
+			}
+			else {
+				$(elem).attr("src", thumbnail);
+			}
 		}
 	});
 }
 
-function initHeader() {		
+function initHeader() {
 	//settings
 	var header = $("#container header");
 	var fadeSpeed = 100, fadeTo = 0.5, topDistance = 20;
diff --git a/data/interfaces/default/searchresults.html b/data/interfaces/default/searchresults.html
index 752e0424..52c7c143 100644
--- a/data/interfaces/default/searchresults.html
+++ b/data/interfaces/default/searchresults.html
@@ -68,24 +68,24 @@
 </%def>
 
 <%def name="javascriptIncludes()">
-
+    <script src="js/libs/jquery.unveil.min.js"></script>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 
-	<script>
-	function getArt() {
-		$("table#searchresults_table tr td#albumart img").each(function(){
-			var id = $(this).attr('title');
-			var image = $(this);
-			if ( !image.hasClass('done') ) {
-				image.addClass('done');
-				getImageLinks(image,id,"${type}");
-			}
-		});
-	}
-	function initThisPage() {
-		getArt();
-		$('#searchresults_table').dataTable(
-			{
+	<script type="text/javascript">
+    	function getArt() {
+    		$("table#searchresults_table tr td#albumart img").each(function(){
+    			var id = $(this).attr('title');
+    			var image = $(this);
+
+    			if ( !image.hasClass('done') ) {
+    				image.addClass('done');
+    				getImageLinks(image, id, "${type}", true);
+    			}
+    		});
+    	}
+    	function initThisPage() {
+            getArt();
+    		$('#searchresults_table').dataTable({
 				"bDestroy": true,
 				"aoColumnDefs": [
 			          { 'bSortable': false, 'aTargets': [ 0 ] }
@@ -101,13 +101,14 @@
 				"sPaginationType": "full_numbers",
 				"aaSorting": []
 			});
+            $('#searchresults_table').on("draw.dt", function () {
+                $("img").unveil();
+            });
 			resetFilters("album");
-	}
-	$(document).ready(function(){
-			initThisPage();
-	});
-	$(window).load(function(){
-		initFancybox();
-	});
+    	}
+    	$(document).ready(function(){
+    		initFancybox();
+            initThisPage();
+    	});
 	</script>
 </%def>
diff --git a/data/interfaces/default/upcoming.html b/data/interfaces/default/upcoming.html
index 4a4807b2..3a10b871 100644
--- a/data/interfaces/default/upcoming.html
+++ b/data/interfaces/default/upcoming.html
@@ -40,7 +40,7 @@
 		%for album in wanted:
 			<tr class="gradeZ">
 				<td id="select"><input type="checkbox" name="${album['AlbumID']}" class="checkbox" /></th>
-				<td id="albumart"><img title="${album['AlbumID']}" height="64" width="64" src="artwork/thumbs/album/${album['AlbumID']}"></td>
+				<td id="albumart"><img title="${album['AlbumID']}" height="64" width="64" src="interfaces/default/images/no-cover-art.png" data-src="artwork/thumbs/album/${album['AlbumID']}"></td>
 				<td id="artistname"><a href="artistPage?ArtistID=${album['ArtistID']}">${album['ArtistName']}</a></td>
 				<td id="albumname"><a href="albumPage?AlbumID=${album['AlbumID']}">${album['AlbumTitle']}</a></td>
 				<td id="reldate">${album['ReleaseDate']}</td>
@@ -88,9 +88,11 @@
 </%def>
 
 <%def name="javascriptIncludes()">
+	<script src="js/libs/jquery.unveil.min.js"></script>
 	<script src="js/libs/jquery.dataTables.min.js"></script>
 	<script>
 		function initThisPage() {
+			$("img").unveil();
 			$('#wanted_table').dataTable({
 				"oLanguage": {
 					"sEmptyTable": " "
diff --git a/data/js/libs/jquery.unveil.min.js b/data/js/libs/jquery.unveil.min.js
new file mode 100644
index 00000000..4fef20fc
--- /dev/null
+++ b/data/js/libs/jquery.unveil.min.js
@@ -0,0 +1 @@
+!function(t){t.fn.unveil=function(i,e){function n(){var i=a.filter(function(){var i=t(this);if(!i.is(":hidden")){var e=o.scrollTop(),n=e+o.height(),r=i.offset().top,s=r+i.height();return s>=e-u&&n+u>=r}});r=i.trigger("unveil"),a=a.not(r)}var r,o=t(window),u=i||0,s=window.devicePixelRatio>1,l=s?"data-src-retina":"data-src",a=this;return this.one("unveil",function(){var t=this.getAttribute(l);t=t||this.getAttribute("data-src"),t&&(this.setAttribute("src",t),"function"==typeof e&&e.call(this))}),o.on("scroll.unveil resize.unveil lookup.unveil",n),n(),this}}(window.jQuery||window.Zepto);
\ No newline at end of file