Use static hourglass image instead of an animages GIF during image loading, remove usage of scrollstop, start generating previews much sooner (threshold of 400 pixels), remove fallback code when javascript is disabled, show pages previews as a vertical scroller seems to reduce lag and browser memory consumption.

mayan/apps/documents/widgets.py

@@ -36,7 +36,7 @@ class DocumentPagesCarouselWidget(forms.widgets.Widget):
     """
     def render(self, name, value, attrs=None):
         output = []
-        output.append(u'<div class="carousel-container" style="white-space:nowrap; overflow: auto;">')
+        output.append(u'<div id="carousel-container" style="overflow-x: scroll; height: 500px;">')
 
         try:
             document_pages = value.pages.all()
@@ -48,7 +48,7 @@ class DocumentPagesCarouselWidget(forms.widgets.Widget):
         page_count = value.page_count
 
         for page in document_pages:
-            output.append(u'<div style="display: inline-block; margin: 5px 10px 10px 10px;">')
+            output.append(u'<div style="margin: 5px 10px 10px 10px;">')
             output.append(u'<div class="tc">%(page_string)s %(page)s</div>' % {'page_string': ugettext(u'Page'), 'page': page.page_number})
             output.append(
                 document_html_widget(
@@ -124,8 +124,7 @@ def document_html_widget(document, click_view=None, page=DEFAULT_PAGE_NUMBER, zo
     if nolazyload:
         result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text))
     else:
-        result.append(u'<img class="thin_border %s" data-src="%s" src="%simages/ajax-loader.gif" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
+        result.append(u'<img class="thin_border %s" data-src="%s" src="%smain/icons/hourglass.png" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
-        result.append(u'<noscript><img style="border: 1px solid black;" src="%s" alt="%s" /></noscript>' % (preview_view, alt_text))
 
     if click_view:
         result.append(u'</a>')

mayan/apps/main/static/packages/jquery.scrollstop.js

@@ -1,72 +0,0 @@
-/* http://james.padolsey.com/javascript/special-scroll-events-for-jquery/ */
-
-(function(){
-    
-    var special = jQuery.event.special,
-        uid1 = "D" + (+new Date()),
-        uid2 = "D" + (+new Date() + 1);
-        
-    special.scrollstart = {
-        setup: function() {
-            
-            var timer,
-                handler =  function(evt) {
-                    
-                    var _self = this,
-                        _args = arguments;
-                    
-                    if (timer) {
-                        clearTimeout(timer);
-                    } else {
-                        evt.type = "scrollstart";
-                        jQuery.event.dispatch.apply(_self, _args);
-                    }
-                    
-                    timer = setTimeout( function(){
-                        timer = null;
-                    }, special.scrollstop.latency);
-                    
-                };
-            
-            jQuery(this).bind("scroll", handler).data(uid1, handler);
-            
-        },
-        teardown: function(){
-            jQuery(this).unbind( "scroll", jQuery(this).data(uid1) );
-        }
-    };
-    
-    special.scrollstop = {
-        latency: 300,
-        setup: function() {
-            
-            var timer,
-                    handler = function(evt) {
-                    
-                    var _self = this,
-                        _args = arguments;
-                    
-                    if (timer) {
-                        clearTimeout(timer);
-                    }
-                    
-                    timer = setTimeout( function(){
-                        
-                        timer = null;
-                        evt.type = "scrollstop";
-                        jQuery.event.dispatch.apply(_self, _args);
-                        
-                        
-                    }, special.scrollstop.latency);
-                    
-                };
-            
-            jQuery(this).bind("scroll", handler).data(uid2, handler);
-            
-        },
-        teardown: function() {
-            jQuery(this).unbind( "scroll", jQuery(this).data(uid2) );
-        }
-    };
-    
-})();

mayan/apps/main/templates/main/base.html

@@ -364,7 +364,6 @@
         <script type="text/javascript" charset="utf-8" src="{% static 'packages/jquery-2.1.1.min.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/jquery.scrollview.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/jquery_lazyload-master/jquery.lazyload.min.js' %}"></script>
-        <script type="text/javascript" src="{% static 'packages/jquery.scrollstop.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/fancyapps-fancyBox-18d1712/source/jquery.fancybox.pack.js' %}"></script>
         <script type="text/javascript" src="{% static 'packages/fancyapps-fancyBox-18d1712/lib/jquery.mousewheel-3.0.6.pack.js' %}"></script>
 
@@ -485,13 +484,13 @@
                 });
 
                 $('img.lazy-load-carousel').lazyload({
-                    container: $(".carousel-container"),
+                    threshold : 400,
+                    container: $("#carousel-container"),
                     appear: function(elements_left, settings) {
                         var $this = $(this);
                         $this.removeClass('lazy-load-carousel');
                         load_document_image($this);
                     },
-                    event: 'scrollstop'
                 });
 
                 $('img.lazy-load-interactive').lazyload({

mayan/apps/sources/widgets.py

@@ -54,7 +54,7 @@ def staging_file_html_widget(staging_file, click_view=None, page=DEFAULT_PAGE_NU
     if nolazyload:
         result.append(u'<img style="border: 1px solid black;" src="%s" alt="%s" />' % (preview_view, alt_text))
     else:
-        result.append(u'<img class="thin_border %s" data-src="%s" src="%simages/ajax-loader.gif" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
+        result.append(u'<img class="thin_border %s" data-src="%s" src="%smain/icons/hourglass.png" alt="%s" />' % (image_class, preview_view, settings.STATIC_URL, alt_text))
         result.append(u'<noscript><img style="border: 1px solid black;" src="%s" alt="%s" /></noscript>' % (preview_view, alt_text))
 
     if click_view: