New version: show loading icon until page renders

diff --git a/web/viewer.css b/web/viewer.css
index 65f2928fa6d0cbb3a8a0eb3f1ac280ca784fdd1c..6f4856e17f3935535027bc36c537ada0e98d4feb 100644 (file)
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -237,7 +237,7 @@ canvas {
 
 .loadingIcon {
   position: absolute;
-  display: none;
+  display: block;
   left: 0;
   top: 0;
   right: 0;
@@ -245,8 +245,8 @@ canvas {
   background: url('images/loading-icon.gif') center no-repeat; */
 }
 
-.loadingIcon.show {
-  display: block;
+.loadingIcon.hide {
+  display: none;
 }
 
 .textLayer {

diff --git a/web/viewer.js b/web/viewer.js
index f319fcdc1cb3036aacb55fbc31fad57aa26d9f87..a999ec553d77c8a33b19b5a1e1199578d6dbe593 100644 (file)
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -618,6 +618,10 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     div.removeAttribute('data-loaded');
 
     delete this.canvas;
+
+    this.loadingIconDiv = document.createElement('div');
+    this.loadingIconDiv.className = 'loadingIcon';
+    div.appendChild(this.loadingIconDiv);
   };
 
   function setupAnnotations(content, scale) {
@@ -774,7 +778,7 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
   };
 
   this.drawingRequired = function() {
-    return !div.hasChildNodes();
+    return !div.querySelector('canvas');
   };
 
   this.draw = function pageviewDraw(callback) {
@@ -790,10 +794,6 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     div.appendChild(canvas);
     this.canvas = canvas;
 
-    var loadingIconDiv = document.createElement('div');
-    loadingIconDiv.className = 'loadingIcon';
-    div.appendChild(loadingIconDiv);
-
     var textLayerDiv = null;
     if (!PDFJS.disableTextLayer) {
       textLayerDiv = document.createElement('div');
@@ -816,16 +816,9 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight,
     // Rendering area
 
     var self = this;
-
-    // Display loading icon if page hasn't finished rendering after XXXX ms
-    var loadingTimer = setTimeout(function loadingTimerCallback() {
-      loadingIconDiv.classList.add('show');
-    }, 1000);
-
     stats.begin = Date.now();
     this.content.startRendering(ctx, function pageViewDrawCallback(error) {
-      clearTimeout(loadingTimer);
-      loadingIconDiv.classList.remove('show');
+      self.loadingIconDiv.classList.add('hide');
 
       if (error)
         PDFView.error('An error occurred while rendering the page.', error);