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 e355f7fc2..65f2928fa 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -235,6 +235,20 @@ canvas { -webkit-box-shadow: 0px 2px 10px #ff0; } +.loadingIcon { + position: absolute; + display: none; + left: 0; + top: 0; + right: 0; + bottom: 0; + background: url('images/loading-icon.gif') center no-repeat; */ +} + +.loadingIcon.show { + display: block; +} + .textLayer { position: absolute; left: 0; diff --git a/web/viewer.js b/web/viewer.js index dd16b0282..f319fcdc1 100644 --- a/web/viewer.js +++ b/web/viewer.js @@ -790,6 +790,10 @@ 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'); @@ -809,19 +813,30 @@ 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; + + // 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'); + + 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);