load one image at a time

lib/ComicBook.js

@@ -6,6 +6,7 @@
 	Fo sho:
 		- fix manga mode
 		- trigger preload if requesting valid but not loaded images (can happen if network was interupted)
+		- loading and generally hackiness of pointer is buggy, fix.
 		- check for html5 feature support where used: diveintohtml5.org/everything.html or www.modernizr.com
 		- when applying enhancements reading position gets lost
 		- full browser test - IE9 / FF3.6+ / Chrome / Safari / Opera
@@ -455,9 +456,42 @@ function ComicBook(id, srcs, opts) {
 
 		var i = pointer; // the current page counter for this method
 		var rendered = false;
+		var queue = [];
 
 		this.showControl("loadingOverlay");
 
+		// loads pages in both directions so you don't have to wait for all pages
+		// to be loaded before you can scroll backwards
+		function preload(start, stop) {
+
+			var forward_buffer = 3; // TODO: make this into a config option?
+
+			var j = 0;
+			var count = 1;
+			var forward = start;
+			var backward = start-1;
+
+			while (forward <= stop) {
+
+				if (count > forward_buffer && backward > -1) {
+					queue.push(backward);
+					backward--;
+					count = 0;
+				} else {
+					queue.push(forward);
+					forward++;
+				}
+				count++;
+			}
+
+			while (backward > -1) {
+				queue.push(backward);
+				backward--;
+			}
+
+			loadImage(queue[j]);
+		}
+
 		function loadImage(i) {
 
 			var page = new Image();
@@ -467,10 +501,9 @@ function ComicBook(id, srcs, opts) {
 
 				pages[i] = this;
 				loaded.push(i);
+				queue.splice(0,1);
 
-				var percentage_loaded = Math.floor((loaded.length / no_pages) * 100);
-
-				$("#cb-progress-bar").progressbar("value", percentage_loaded);
+				$("#cb-progress-bar").progressbar("value", Math.floor((loaded.length / no_pages) * 100));
 
 				// double page mode needs an extra page added
 				var buffer = (options.displayMode === "double" && pointer < srcs.length-1) ? 1 : 0;
@@ -491,41 +524,14 @@ function ComicBook(id, srcs, opts) {
 					rendered = true;
 				}
 
-				if (percentage_loaded === 100) {
+				if (queue.length) {
+					loadImage(i+1);
+				} else {
 					$("#cb-status").delay(500).fadeOut();
 				}
 			};
 		}
 
-		// loads pages in both directions so you don't have to wait for all pages
-		// to be loaded before you can scroll backwards
-		function preload(start, stop) {
-
-			var forward_buffer = 3; // TODO: make this into a config option?
-
-			var count = 1;
-			var forward = start;
-			var backward = start-1;
-
-			while (forward <= stop) {
-
-				if (count > forward_buffer && backward > -1) {
-					loadImage(backward);
-					backward--;
-					count = 0;
-				} else {
-					loadImage(forward);
-					forward++;
-				}
-				count++;
-			}
-
-			while (backward > -1) {
-				loadImage(backward);
-				backward--;
-			}
-		}
-
 		preload(i, srcs.length-1);
 	};