make sure that the requested page has been loaded before drawing it

app/comic-book.js

@@ -42,10 +42,12 @@ class ComicBook extends EventEmitter {
   }
 
   render () {
+    this.pageRendered = false
     this.el = document.createElement('div')
     this.el.appendChild(this.canvas.canvas)
     this.el.appendChild(this.progressBar.el)
     this.el.appendChild(this.loadIndicator.el)
+    this.drawPage()
     return this
   }
 
@@ -53,6 +55,10 @@ class ComicBook extends EventEmitter {
     this.emit('preload:start')
 
     this.srcs.forEach((src, pageIndex) => {
+
+      // allow preload to be run multiple times without duplicating requests
+      if (this.pages.has(pageIndex)) return
+
       let image = new window.Image()
 
       image.src = src
@@ -62,7 +68,7 @@ class ComicBook extends EventEmitter {
         this.pages.set(index, image)
         this.emit('preload:image', image)
 
-        if (this.pages.size === this.preloadBuffer) {
+        if (this.pages.size >= this.preloadBuffer && !this.pageRendered) {
           this.emit('preload:ready')
         }
 
@@ -80,7 +86,13 @@ class ComicBook extends EventEmitter {
 
   drawPage (pageIndex) {
     if (typeof pageIndex !== 'number') pageIndex = this.currentPageIndex
-    let args = [ this.pages.get(pageIndex) ]
+
+    let page = this.pages.get(pageIndex)
+
+    // if the requested image hasn't been loaded yet, force another preload run
+    if (!page) return this.preload()
+
+    let args = [ page ]
 
     if (this.options.doublePage) {
       args.push(this.pages.get(pageIndex + 1))
@@ -95,6 +107,7 @@ class ComicBook extends EventEmitter {
     try {
       this.canvas.drawImage.apply(this.canvas, args)
       this.currentPageIndex = pageIndex
+      this.pageRendered = true
     } catch (e) {
       if (e.message !== 'Invalid image') throw e
     }

app/index.js

@@ -14,7 +14,6 @@ let srcs = [
 ]
 let comic = window.comic = new ComicBook(srcs, { doublePage: true })
 
-comic.preload()
 comic.render()
 
 document.addEventListener('DOMContentLoaded', () => {

dist/comicbook.js

@@ -65,10 +65,12 @@ var ComicBook = (function (_EventEmitter) {
   }, {
     key: 'render',
     value: function render() {
+      this.pageRendered = false;
       this.el = document.createElement('div');
       this.el.appendChild(this.canvas.canvas);
       this.el.appendChild(this.progressBar.el);
       this.el.appendChild(this.loadIndicator.el);
+      this.drawPage();
       return this;
     }
   }, {
@@ -79,6 +81,10 @@ var ComicBook = (function (_EventEmitter) {
       this.emit('preload:start');
 
       this.srcs.forEach(function (src, pageIndex) {
+
+        // allow preload to be run multiple times without duplicating requests
+        if (_this.pages.has(pageIndex)) return;
+
         var image = new window.Image();
 
         image.src = src;
@@ -88,7 +94,7 @@ var ComicBook = (function (_EventEmitter) {
           this.pages.set(index, image);
           this.emit('preload:image', image);
 
-          if (this.pages.size === this.preloadBuffer) {
+          if (this.pages.size >= this.preloadBuffer && !this.pageRendered) {
             this.emit('preload:ready');
           }
 
@@ -108,7 +114,13 @@ var ComicBook = (function (_EventEmitter) {
     key: 'drawPage',
     value: function drawPage(pageIndex) {
       if (typeof pageIndex !== 'number') pageIndex = this.currentPageIndex;
-      var args = [this.pages.get(pageIndex)];
+
+      var page = this.pages.get(pageIndex);
+
+      // if the requested image hasn't been loaded yet, force another preload run
+      if (!page) return this.preload();
+
+      var args = [page];
 
       if (this.options.doublePage) {
         args.push(this.pages.get(pageIndex + 1));
@@ -123,6 +135,7 @@ var ComicBook = (function (_EventEmitter) {
       try {
         this.canvas.drawImage.apply(this.canvas, args);
         this.currentPageIndex = pageIndex;
+        this.pageRendered = true;
       } catch (e) {
         if (e.message !== 'Invalid image') throw e;
       }
@@ -159,7 +172,6 @@ var ComicBook = window.ComicBook = require('./comic-book');
 var srcs = ['https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_00.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_01.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_02.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_03.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_04.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_05.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_06.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_07.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_08.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_09.jpg', 'https://raw.githubusercontent.com/balaclark/HTML5-Comic-Book-Reader/master/examples/goldenboy/goldenboy_10.jpg'];
 var comic = window.comic = new ComicBook(srcs, { doublePage: true });
 
-comic.preload();
 comic.render();
 
 document.addEventListener('DOMContentLoaded', function () {

test/comic-book.test.js

@@ -96,6 +96,22 @@ describe('ComicBook', () => {
       })
     })
 
+    // FIXME
+    it.skip('should be able to run without reloading already loaded images', done => {
+      let comic = new ComicBook(srcs)
+      let loaded = 0
+
+      comic.on('preload:image', (image) => loaded++)
+      comic.on('preload:finish', () => {
+        assert.equal(loaded, srcs.length)
+        done()
+      })
+
+      comic.preload()
+      comic.preload()
+      comic.preload()
+    })
+
     it('should restart the preload from whatever page is requested')
   })
 
@@ -103,9 +119,15 @@ describe('ComicBook', () => {
 
     describe('drawPage()', () => {
 
-      it('should draw a given page', () => {
-        let comic = new ComicBook(srcs)
+      let comic
 
+      beforeEach(done => {
+        comic = new ComicBook(srcs)
+        comic.on('preload:finish', done)
+        comic.preload()
+      })
+
+      it('should draw a given page', () => {
         comic.canvas.drawImage = sinon.spy()
 
         comic.drawPage(1)
@@ -115,8 +137,6 @@ describe('ComicBook', () => {
       })
 
       it('should default to drawing the current page', () => {
-        let comic = new ComicBook(srcs)
-
         comic.canvas.drawImage = sinon.spy()
         comic.currentPageIndex = 2
 
@@ -127,8 +147,6 @@ describe('ComicBook', () => {
       })
 
       it('should update the current page index after drawing', () => {
-        let comic = new ComicBook(srcs)
-
         comic.canvas.drawImage = () => {}
         comic.currentPageIndex = 1
 
@@ -138,8 +156,6 @@ describe('ComicBook', () => {
       })
 
       it('should ignore "Invalid image" exceptions and not draw the page when they occur', () => {
-        let comic = new ComicBook(srcs)
-
         comic.currentPageIndex = 1
 
         assert.doesNotThrow(comic.drawPage.bind(comic, 666))
@@ -147,8 +163,6 @@ describe('ComicBook', () => {
       })
 
       it('should throw all other exceptions and not draw the page when they occur', () => {
-        let comic = new ComicBook(srcs)
-
         comic.canvas.drawImage = () => { throw new Error('Some other exception') }
 
         assert.throws(comic.drawPage.bind(comic))