Improve document page image lazy loading. Use font awesome spinner and CSS3 animation.

mayan/apps/appearance/static/appearance/css/base.css

@@ -70,10 +70,6 @@ body {
     border: 1px solid black;
 }
 
-.lazy-load-carousel-loaded {
-    width: 100%;
-}
-
 .mayan-page-wrapper-interactive {
     overflow: auto;
 }
@@ -94,6 +90,27 @@ body {
     text-align: center;
 }
 
+img.lazy-load {
+    visibility: hidden;
+    width: 0px;
+    height: 0px;
+}
+
+img.lazy-load-carousel {
+    visibility: hidden;
+    width: 0px;
+    height: 0px;
+}
+
+.tc {
+    margin: auto;
+    text-align: center;
+}
+
+.tc a {
+    text-align: center;
+}
+
 .img-nolazyload {
     border: 1px solid black;
 }

mayan/apps/appearance/static/appearance/js/base.js

@@ -19,7 +19,6 @@ function set_image_noninteractive(image) {
 function loadDocumentImage(image) {
     $.get(image.attr('data-src'), function(result) {
         image.attr('src', result.data);
-        image.addClass(image.attr('data-post-load-class'));
     })
     .fail(function() {
         image.parent().parent().html('<span class="fa-stack fa-lg"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-times fa-stack-1x text-danger"></i></span>');
@@ -32,6 +31,16 @@ function dismissAlert(element) {
 }
 
 jQuery(document).ready(function() {
+    $('.lazy-load').on('load', function() {
+        $(this).siblings('.spinner').remove();
+        $(this).removeClass('lazy-load');
+    });
+
+    $('.lazy-load-carousel').on('load', function() {
+        $(this).siblings('.spinner').remove();
+        $(this).removeClass('lazy-load-carousel');
+    });
+
     resizeFullHeight();
 
     $(window).resize(function() {
@@ -76,11 +85,18 @@ jQuery(document).ready(function() {
         e.preventDefault();
     })
 
-   $('img.lazy-load').lazyload();
+   $('img.lazy-load').lazyload({
+        appear: function(elements_left, settings) {
+            loadDocumentImage($(this));
+        },
+    });
 
     $('img.lazy-load-carousel').lazyload({
-        threshold : 400,
+        appear: function(elements_left, settings) {
+            loadDocumentImage($(this));
+        },
         container: $("#carousel-container"),
+        threshold: 400
     });
 
     $('th input:checkbox').click(function(e) {

mayan/apps/documents/models.py

@@ -682,7 +682,6 @@ class DocumentPage(models.Model):
 
         # Set sensible defaults if the argument is not specified or if the
         # argument is None
-
         size = kwargs.get('size', setting_display_size.value) or setting_display_size.value
         rotation = kwargs.get('rotation', DEFAULT_ROTATION) or DEFAULT_ROTATION
         zoom_level = kwargs.get('zoom', DEFAULT_ZOOM_LEVEL) or DEFAULT_ZOOM_LEVEL

mayan/apps/documents/widgets.py

@@ -58,7 +58,6 @@ class DocumentPagesCarouselWidget(forms.widgets.Widget):
                     fancybox_class='',
                     image_class='lazy-load-carousel',
                     size=setting_display_size.value,
-                    post_load_class='lazy-load-carousel-loaded',
                 )
             )
             output.append(
@@ -85,14 +84,14 @@ def document_link(document):
     )
 
 
-def document_page_html_widget(document_page, click_view=None, click_view_arguments=None, zoom=DEFAULT_ZOOM_LEVEL, rotation=DEFAULT_ROTATION, gallery_name=None, fancybox_class='fancybox', image_class='lazy-load', title=None, size=setting_thumbnail_size.value, nolazyload=False, post_load_class=None, disable_title_link=False, preview_click_view=None, click_view_querydict=None, click_view_arguments_lazy=None):
+def document_page_html_widget(document_page, click_view=None, click_view_arguments=None, zoom=DEFAULT_ZOOM_LEVEL, rotation=DEFAULT_ROTATION, gallery_name=None, fancybox_class='fancybox', image_class='lazy-load', title=None, size=setting_thumbnail_size.value, nolazyload=False, disable_title_link=False, preview_click_view=None, click_view_querydict=None, click_view_arguments_lazy=None):
     result = []
 
     alt_text = _('Document page image')
 
     if not document_page:
         return mark_safe(
-            '<span class="fa-stack fa-lg"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-question fa-stack-1x text-danger"></i></span>'
+            '<div class="tc"><span class="fa-stack fa-lg"><i class="fa fa-file-o fa-stack-2x"></i><i class="fa fa-question fa-stack-1x text-danger"></i></span></div>'
         )
 
     document = document_page.document
@@ -167,10 +166,11 @@ def document_page_html_widget(document_page, click_view=None, click_view_argumen
         )
     else:
         result.append(
+            '<i class="spinner fa fa-spinner fa-pulse fa-3x fa-fw"></i> '
             '<img class="thin_border {}" data-original="{}" '
-            'data-post-load-class="{}" src="{}" alt="{}" />'.format(
+            'src="{}" alt="{}" />'.format(
-                image_class, preview_view, post_load_class,
+                image_class, preview_view,
-                static('appearance/images/loading.png'), alt_text
+                '', alt_text
             )
         )