Made it work with broken images.

README.md

@@ -18,11 +18,7 @@ Comic Book Reader
 * Touch movement is broken in IE11
 
 # TODO Small:
-* try making thumb nails in an iframe with a shared worker
-* make sure it works with all broken archives
 * Add an option to disable user counter
-* Make sure broken page images work
-* Make sure broken archives work
 * Stop browser navigation when loading
 * Add a place holder in the page selector, for images that have not loaded
 * Make esc un full screen and bring down the top menu

js/db.js

@@ -55,14 +55,20 @@ function getAllCachedFirstPages(onStart, onEach) {
 
 				cursorRequest.onsuccess = function(evt) {
 					var cursor = evt.target.result;
+
+					// DB has files
 					if (cursor) {
 		//				console.info(cursor.key);
 		//				console.info(cursor.value);
 						onEach(filename, cursor.key, cursor.value);
-						trans.abort();
-						m_db.close();
-						nextElement();
+					// DB has no files
+					} else {
+						onEach(filename, null, null);
 					}
+
+					trans.abort();
+					m_db.close();
+					nextElement();
 				};
 			};
 		};

js/last_change_date.js

@@ -1 +1 @@
-function getLastChangeDate() { return "December 29, 2015 - 10:33:26"; }
+function getLastChangeDate() { return "December 29, 2015 - 13:13:22"; }

main.appcache

@@ -1,5 +1,5 @@
 CACHE MANIFEST
-# v1 Tue, Dec 29, 2015 10:33:26 AM
+# v1 Tue, Dec 29, 2015  1:13:22 PM
 
 CACHE:
 favicon.ico

main.js

@@ -232,8 +232,11 @@ function showBottomMenu(y_offset, is_instant) {
 			var file_name = g_titles[i];
 			getCachedFile('small', file_name, function(blob) {
 				console.info('Loading thumbnail #' + (i + 1));
-				var url = URL.createObjectURL(blob);
-				console.log('>>>>>>>>>>>>>>>>>>> createObjectURL: ' + url);
+				var url = null;
+				if (blob) {
+					url = URL.createObjectURL(blob)
+					console.log('>>>>>>>>>>>>>>>>>>> createObjectURL: ' + url);
+				}
 
 				var img = document.createElement('img');
 				img.width = 100;
@@ -247,8 +250,10 @@ function showBottomMenu(y_offset, is_instant) {
 
 				// The image loads successfully
 				img.onload = function() {
-					URL.revokeObjectURL(url);
-					console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + url);
+					if (url) {
+						URL.revokeObjectURL(url);
+						console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + url);
+					}
 
 					// Make the image twice as wide if it is in landscape mode
 					if (this.naturalWidth > this.naturalHeight) {
@@ -260,13 +265,23 @@ function showBottomMenu(y_offset, is_instant) {
 				};
 				// The image fails to load
 				img.onerror = function() {
-					URL.revokeObjectURL(url);
-					console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + url);
+					if (url) {
+						URL.revokeObjectURL(url);
+						console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + url);
+					}
+
+					img.onload = null;
+					img.onerror = null;
+					img.src = 'invalid_image.png';
 
 					loadNextThumbNail(i + 1);
 				};
 
-				img.src = url;
+				if (url) {
+					img.src = url;
+				} else {
+					img.src ='invalid_image.png'
+				}
 
 				var container = document.createElement('div');
 				if (i === curr_image_index) {
@@ -309,23 +324,39 @@ function showLibrary() {
 		}
 	};
 	var onEach = function(filename, pagename, blob) {
-		var url = URL.createObjectURL(blob);
-		console.log('>>>>>>>>>>>>>>>>>>> createObjectURL: ' + url);
-		console.info(pagename);
 		var img = new Image();
 		img.title = filename;
 		img.className = 'comicCover';
-		img.onclick = function(e) {
-			libraryMenu.hide();
-			libraryMenu.empty();
 
-			onLoaded(blob, filename, filesize, filetype);
-		};
-		img.onload = function() {
-			URL.revokeObjectURL(this.src);
-			console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + this.src);
-		};
-		img.src = url;
+		if (pagename && blob) {
+			var url = URL.createObjectURL(blob);
+			console.log('>>>>>>>>>>>>>>>>>>> createObjectURL: ' + url);
+			console.info(pagename);
+			img.onclick = function(e) {
+				libraryMenu.hide();
+				libraryMenu.empty();
+
+				onLoaded(null, filename, filesize, filetype);
+			};
+			img.onload = function() {
+				URL.revokeObjectURL(this.src);
+				console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + this.src);
+			};
+			img.onerror = function() {
+				URL.revokeObjectURL(this.src);
+				console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + this.src);
+			};
+			img.src = url;
+		} else {
+			img.onclick = function(e) {
+				libraryMenu.hide();
+				libraryMenu.empty();
+
+				onLoaded(null, filename, filesize, filetype);
+			};
+			img.src = 'invalid_image.png';
+		}
+
 		libraryMenu.append(img);
 	};
 	getAllCachedFirstPages(onStart, onEach);
@@ -432,8 +463,14 @@ function loadImage(page, index, is_position_reset, cb) {
 			URL.revokeObjectURL(url);
 			console.log('<<<<<<<<<<<<<<<<<<<< revokeObjectURL: ' + url);
 
+			img.onload = null;
+			img.onerror = null;
+
 			img.title = '';
-			img.alt = 'Failed to load image';
+			img.alt = 'Invalid Image';
+			img.src = 'invalid_image.png';
+
+			onResize(g_screen_width, g_screen_height);
 			if (cb)
 				cb();
 		};