diff --git a/HISTORY.rst b/HISTORY.rst
index 1b7ec55e03..87bfd7d018 100644
--- a/HISTORY.rst
+++ b/HISTORY.rst
@@ -50,6 +50,7 @@
   recently accessed documents from 40 to 400.
 * Integrate django-autoadmin into the core apps.
 * Update middleware to new style classes.
+* Add server side invalid document template.
 
 3.1.11 (2019-04-XX)
 ===================
diff --git a/docs/releases/3.2.rst b/docs/releases/3.2.rst
index e8daf27a6f..9fc1531085 100644
--- a/docs/releases/3.2.rst
+++ b/docs/releases/3.2.rst
@@ -74,6 +74,7 @@ Other changes
   recently accessed documents from 40 to 400.
 * Integrate django-autoadmin into the core apps.
 * Update middleware to new style classes.
+* Add server side invalid document template.
 
 Removals
 --------
diff --git a/mayan/apps/appearance/static/appearance/js/mayan_image.js b/mayan/apps/appearance/static/appearance/js/mayan_image.js
index d04f896832..aa544d509d 100644
--- a/mayan/apps/appearance/static/appearance/js/mayan_image.js
+++ b/mayan/apps/appearance/static/appearance/js/mayan_image.js
@@ -6,23 +6,24 @@ class MayanImage {
         this.load();
     }
 
-    static intialize () {
-        var app = this;
+    static intialize (options) {
+        this.options = options || {};
+        this.options.templateInvalidDocument = this.options.templateInvalidDocument || '<span>Error loading document image</span>';
 
-        this.fancybox = $().fancybox({
-            animationDuration : 300,
-            buttons : [
-                'fullScreen',
-                'close',
-            ],
-            selector: 'a.fancybox',
+        $().fancybox({
             afterShow: function (instance, current) {
                 $('a.a-caption').on('click', function(event) {
                     instance.close(true);
                 });
             },
+            animationEffect: 'fade',
+            animationDuration : 100,
+            buttons : [
+                'fullScreen',
+                'close',
+            ],
             infobar: true,
-
+            selector: 'a.fancybox'
         });
 
         $('img.lazy-load').lazyload({
@@ -42,46 +43,53 @@ class MayanImage {
 
         $('.lazy-load').one('load', function() {
             $(this).hide();
-            $(this).fadeIn(300);
+            $(this).show();
             $(this).siblings('.spinner-container').remove();
             $(this).removeClass('lazy-load pull-left');
             clearTimeout(MayanImage.timer);
-            MayanImage.timer = setTimeout(MayanImage.timerFunction, 100);
+            MayanImage.timer = setTimeout(MayanImage.timerFunction, 250);
         });
 
         $('.lazy-load-carousel').one('load', function() {
             $(this).hide();
-            $(this).fadeIn(300);
+            $(this).show();
             $(this).siblings('.spinner-container').remove();
             $(this).removeClass('lazy-load-carousel pull-left');
         });
     }
 
     static timerFunction () {
-        $.fn.matchHeight._maintainScroll = true;
         $.fn.matchHeight._update();
     }
 
     load () {
         var self = this;
         var container = this.element.parent().parent().parent();
+        var dataURL = this.element.attr('data-url');
 
-        this.element.attr('src', this.element.attr('data-url'));
-        this.element.on('error', function() {
-            // Check the .complete property to see if it is a real error
-            // or it was a cached image
-            if (this.complete === false) {
-                // It is a cached image, set the src attribute to trigger
-                // it's display.
-                this.src = this.src;
-            } else {
-                container.html(MayanImage.templateInvalidDocument);
-            }
-        });
-
-        $.fn.matchHeight._maintainScroll = true;
+        if (dataURL === '') {
+            container.html(MayanImage.options.templateInvalidDocument);
+        } else {
+            this.element.attr('src', dataURL);
+            setTimeout(function () {
+                self.element.on('error', function () {
+                    // Check the .complete property to see if it is a real
+                    // error or it was a cached image
+                    if (this.complete === false) {
+                        // It is a cached image, set the src attribute to
+                        // trigger it's display.
+                        this.src = dataURL;
+                    } else {
+                        container.html(
+                            MayanImage.options.templateInvalidDocument
+                        );
+                    }
+                });
+            }, 1);
+        }
     };
 }
 
-MayanImage.templateInvalidDocument = $('#template-invalid-document').html();
 MayanImage.timer = setTimeout(null);
+
+$.fn.matchHeight._maintainScroll = true;
diff --git a/mayan/apps/appearance/templates/appearance/root.html b/mayan/apps/appearance/templates/appearance/root.html
index 3a98e2d645..b986ffc988 100644
--- a/mayan/apps/appearance/templates/appearance/root.html
+++ b/mayan/apps/appearance/templates/appearance/root.html
@@ -61,17 +61,6 @@
             </div>
         </div>
 
-        <script id="template-invalid-document" type="text/x-template">
-            <div class="text-center" style="border: height: 100%;">
-                <div class="fa-3x">
-                    <span class="fa-layers fa-fw">
-                        <i class="far fa-file text-primary"></i>
-                        <i class="fa-inverse fas fa-times text-danger" data-fa-transform="shrink-6"></i>
-                    </span>
-                </div>
-            </div>
-        </script>
-
         <script id="template-error" type="text/x-template">
             <div class="content">
                 <h2 class="title">{% blocktrans %}Server communication error{% endblocktrans %}</h2>
@@ -120,7 +109,9 @@
             var app = new MayanApp();
 
             var afterBaseLoad = function () {
-                MayanImage.intialize();
+                MayanImage.intialize({
+                    templateInvalidDocument: '{% spaceless %}{% include "documents/invalid_document.html" %}{% endspaceless %}'
+                });
                 app.doToastrMessages();
                 app.resizeFullHeight();
                 app.setupSelect2();
diff --git a/mayan/apps/documents/apps.py b/mayan/apps/documents/apps.py
index 3190c9f288..eee98adab9 100644
--- a/mayan/apps/documents/apps.py
+++ b/mayan/apps/documents/apps.py
@@ -14,7 +14,7 @@ from mayan.apps.common import (
     MayanAppConfig, MissingItem, menu_facet, menu_main, menu_object,
     menu_secondary, menu_setup, menu_sidebar, menu_multi_item, menu_tools
 )
-from mayan.apps.common.classes import ModelField
+from mayan.apps.common.classes import ModelField, Template
 from mayan.apps.common.signals import post_initial_setup
 from mayan.apps.common.widgets import TwoStateWidget
 from mayan.apps.dashboards.dashboards import dashboard_main
@@ -333,6 +333,11 @@ class DocumentsApp(MayanAppConfig):
             func=lambda context: context['object'].documents.count()
         )
 
+        Template(
+            name='invalid_document',
+            template_name='documents/invalid_document.html'
+        )
+
         app.conf.CELERYBEAT_SCHEDULE.update(
             {
                 'task_check_delete_periods': {
diff --git a/mayan/apps/documents/templates/documents/invalid_document.html b/mayan/apps/documents/templates/documents/invalid_document.html
new file mode 100644
index 0000000000..3ef8668352
--- /dev/null
+++ b/mayan/apps/documents/templates/documents/invalid_document.html
@@ -0,0 +1,11 @@
+{% spaceless %}
+<div class="text-center" style="border: height: 100%;">
+    <div class="fa-4x">
+        <span class="fa-layers fa-fw">
+            <i class="far fa-file text-primary"></i>
+            <i class="fas fa-times text-danger" data-fa-transform="shrink-8"></i>
+        </span>
+    </div>
+</div>
+{% endspaceless %}
+