diff --git a/web/images/loading-icon.gif b/web/images/loading-icon.gif new file mode 100644 index 000000000..1c72ebb55 Binary files /dev/null and b/web/images/loading-icon.gif differ diff --git a/web/viewer.css b/web/viewer.css index b9fd3e9e4..681e5046a 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -235,6 +235,16 @@ canvas { -webkit-box-shadow: 0px 2px 10px #ff0; } +.loadingIcon { + position: absolute; + display: block; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: url('images/loading-icon.gif') center no-repeat; +} + .textLayer { position: absolute; left: 0; diff --git a/web/viewer.js b/web/viewer.js index 04339ca66..026191d74 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -644,6 +644,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) { @@ -808,7 +812,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) { @@ -843,19 +847,23 @@ var PageView = function pageView(container, content, id, pageWidth, pageHeight, ctx.restore(); ctx.translate(-this.x * scale, -this.y * scale); - stats.begin = Date.now(); - this.content.startRendering(ctx, - (function pageViewDrawCallback(error) { - if (error) - PDFView.error('An error occurred while rendering the page.', error); - this.updateStats(); - if (this.onAfterDraw) - this.onAfterDraw(); + // Rendering area - cache.push(this); - callback(); - }).bind(this), textLayer - ); + var self = this; + stats.begin = Date.now(); + this.content.startRendering(ctx, function pageViewDrawCallback(error) { + div.removeChild(self.loadingIconDiv); + + if (error) + PDFView.error('An error occurred while rendering the page.', error); + + self.updateStats(); + if (self.onAfterDraw) + self.onAfterDraw(); + + cache.push(self); + callback(); + }, textLayer); setupAnnotations(this.content, this.scale); div.setAttribute('data-loaded', true);