add loading status

diff --git a/web/viewer.css b/web/viewer.css
index d1f725a0217371ed1715c1483208d652f1c23509..5b83c142ae90e0920b8938b9b0d45e685ae6d655 100644 (file)
--- a/web/viewer.css
+++ b/web/viewer.css
@@ -271,3 +271,8 @@ canvas {
     page-break-after: always;
   }
 }
+
+#loading {
+       margin:100px 0;
+       text-align:center;
+}

diff --git a/web/viewer.html b/web/viewer.html
index a53593df308bc4da35bb9c84f582f5eed55a32be..13d19fb6c71a2a34c0dd9fe536e8f041b8eb5e3d 100644 (file)
--- a/web/viewer.html
+++ b/web/viewer.html
@@ -89,7 +89,8 @@
         </div>
      </div>
     </div>
-
+    
+       <div id="loading">Loading... 0%</div>
     <div id="viewer"></div>
   </body>
 </html>

diff --git a/web/viewer.js b/web/viewer.js
index 520cf4efa6d7ff7e3454441d9116f61c16309ed1..87ed2b54ff65c59e125eb001f68ccf83db455796 100644 (file)
--- a/web/viewer.js
+++ b/web/viewer.js
@@ -110,13 +110,15 @@ var PDFView = {
     var xhr = new XMLHttpRequest();
     xhr.open('GET', url);
     xhr.mozResponseType = xhr.responseType = 'arraybuffer';
-    xhr.expected = (document.URL.indexOf('file:') === 0) ? 0 : 200;
+    xhr.expected = (document.URL.indexOf('file:') === 0) ? 0 : 200; 
+       xhr.onprogress=PDFView.progressLevel;
 
     xhr.onreadystatechange = function() {
       if (xhr.readyState === 4 && xhr.status === xhr.expected) {
         var data = (xhr.mozResponseArrayBuffer || xhr.mozResponse ||
                     xhr.responseArrayBuffer || xhr.response);
-
+        
+               document.getElementById('loading').style.display="none";
         PDFView.load(data, scale);
       }
     };
@@ -124,6 +126,11 @@ var PDFView = {
     xhr.send(null);
   },
 
+  progressLevel: function(evt) {
+       var p=Math.round((evt.loaded / evt.total)*100);
+       document.getElementById('loading').innerHTML = 'Loading... '+p+'%';
+  },
+
   navigateTo: function(dest) {
     if (typeof dest === 'string')
       dest = this.destinations[dest];