Added loading spinner animation

apps/documents/__init__.py

@@ -1,5 +1,6 @@
 from django.utils.translation import ugettext_lazy as _
 from django.core.urlresolvers import reverse
+from django.conf import settings
 
 from navigation.api import register_links, register_menu, \
     register_model_list_columns, register_multi_item_links
@@ -124,11 +125,13 @@ def document_exists(document):
     except Exception, exc:
         return exc
 
-
 register_model_list_columns(Document, [
         {'name':_(u'thumbnail'), 'attribute':
-            lambda x: '<a class="fancybox" href="%s"><img src="%s" /></a>' % (reverse('document_preview', args=[x.id]),
+            lambda x: '<a class="fancybox" href="%(url)s"><img class="lazy-load" data-href="%(thumbnail)s" src="%(media_url)s/images/blank.gif" /><noscript><img src="%(thumbnail)s" /></noscript></a>' % {
-                reverse('document_thumbnail', args=[x.id]))
+                'url': reverse('document_preview', args=[x.pk]),
+                'thumbnail': reverse('document_thumbnail', args=[x.pk]),
+                'media_url': settings.MEDIA_URL
+            }
         },
         {'name':_(u'metadata'), 'attribute':
             lambda x: x.get_metadata_string()

apps/documents/forms.py

@@ -7,6 +7,7 @@ from django.core.urlresolvers import reverse
 from django.utils.safestring import mark_safe
 from django.forms.formsets import formset_factory
 from django.template.defaultfilters import capfirst
+from django.conf import settings
 
 from documents.staging import StagingFile
 
@@ -36,11 +37,20 @@ class DocumentPageImageWidget(forms.widgets.Widget):
         rotation = final_attrs.get('rotation', 0)
         if value:
             output = []
-            output.append('<div class="full-height scrollable" style="overflow: auto;"><img src="%(img)s?page=%(page)d&zoom=%(zoom)d&rotation=%(rotation)d" /></div>' % {
+            output.append('''
+                <div class="full-height scrollable" style="overflow: auto;">
+                    <div class="tc">
+                        <img class="lazy-load" data-href="%(img)s?page=%(page)d&zoom=%(zoom)d&rotation=%(rotation)d" src="%(media_url)s/images/blank.gif" />
+                        <noscript>
+                            <img src="%(img)s?page=%(page)d&zoom=%(zoom)d&rotation=%(rotation)d" />
+                        </noscript>     
+                    </div>    
+                </div>''' % {
                 'img': reverse('document_display', args=[value.document.id]),
                 'page': value.page_number,
                 'zoom': zoom,
                 'rotation': rotation,
+                'media_url': settings.MEDIA_URL
                 })
             return mark_safe(u''.join(output))
         else:
@@ -106,9 +116,14 @@ class ImageWidget(forms.widgets.Widget):
             output.append(
                 u'''<div style="display: inline-block; border: 1px solid black; margin: 10px;">
                         <div class="tc">%(page_string)s %(page)s</div>
+                        <div class="tc">
                             <a rel="page_gallery" class="fancybox-noscaling" href="%(view_url)s?page=%(page)d">
-                                <img src="%(img)s?page=%(page)d" />
+                                <img class="lazy-load" data-href="%(img)s?page=%(page)d" src="%(media_url)s/images/blank.gif"/>
+                                <noscript>
+                                    <img src="%(img)s?page=%(page)d" />
+                                </noscript>
                             </a>
+                        </div>
                         <div class="tc">
                             <a class="fancybox-iframe" href="%(url)s"><span class="famfam active famfam-page_white_go"></span>%(details_string)s</a>
                         </div>
@@ -119,6 +134,7 @@ class ImageWidget(forms.widgets.Widget):
                     'view_url': reverse('document_display', args=[page.document.pk]),
                     'page_string': ugettext(u'Page'),
                     'details_string': ugettext(u'Details'),
+                    'media_url': settings.MEDIA_URL,
                 })
 
         output.append(u'</div>')
@@ -354,7 +370,10 @@ class MetaDataImageWidget(forms.widgets.Widget):
                         <div class="tc">%(page_string)s: %(document_pages)d</div>
                         <div class="tc">
                             <a rel="group_%(group_id)d_documents_gallery" class="fancybox-noscaling" href="%(view_url)s">
-                                <img style="border: 1px solid black; margin: 10px;" src="%(img)s" />
+                                <img class="lazy-load" style="border: 1px solid black; margin: 10px;" src="%(media_url)s/images/blank.gif" data-href="%(img)s" />
+                                <noscript>
+                                    <img style="border: 1px solid black; margin: 10px;" src="%(img)s" />
+                                </noscript>
                             </a>
                         </div>
                         <div class="tc">
@@ -369,7 +388,8 @@ class MetaDataImageWidget(forms.widgets.Widget):
                     'page_string': ugettext(u'Pages'),
                     'details_string': ugettext(u'Select'),
                     'group_id': value['group'].pk,
-                    'document_name': document
+                    'document_name': document,
+                    'media_url': settings.MEDIA_URL
                 })
         output.append(u'</div>')
         output.append(

apps/main/templates/base.html

@@ -31,6 +31,7 @@
 {% endblock %}
 
 {% block web_theme_javascript %}
+    <script type="text/javascript" src="{{ MEDIA_URL }}packages/JqueryAsynchImageLoader-0.8.min.js"></script>
     <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
     <script type="text/javascript" src="{{ MEDIA_URL }}packages/jquery.fancybox-1.3.4/fancybox/jquery.easing-1.3.pack.js"></script>
 
@@ -85,6 +86,11 @@
                 location.replace(this.href);
                 return false;
             });
+            $('img.lazy-load').jail({
+                event: 'load',
+                placeholder : '{{ MEDIA_URL }}/images/ajax-loader.gif'
+                //effect: 'fadeIn'
+            });
         });
     </script>
     {% block javascript %}{% endblock %}

site_media/packages/JqueryAsynchImageLoader-0.8.min.js

@@ -0,0 +1,9 @@
+/*
+*  JqueryAsynchImageLoader (JAIL) : plugin for jQuery
+*
+* Developed by
+* Sebastiano Armeli-Battana (@sebarmeli) - http://www.sebastianoarmelibattana.com
+* Dual licensed under the MIT or GPL Version 3 licenses.
+* @version 0.8.1
+*/
+(function(a){var b=a(window);a.fn.asynchImageLoader=a.fn.jail=function(d){d=a.extend({timeout:10,effect:false,speed:400,selector:null,offset:0,event:"load+scroll",callback:jQuery.noop,placeholder:false},d);var c=this;this.data("triggerEl",(d.selector)?a(d.selector):b);if(d.placeholder!==false){c.each(function(){a(this).attr("src",d.placeholder);});}if(/^load/.test(d.event)){a.asynchImageLoader.later.call(this,d);}else{a.asynchImageLoader.onEvent.call(this,d,c);}return this;};a.asynchImageLoader={_purgeStack:function(c){var d=0;while(true){if(d===c.length){break;}else{if(c[d].getAttribute("data-href")){d++;}else{c.splice(d,1);}}}},_loadOnEvent:function(g){var f=a(this),d=g.data.options,c=g.data.images;a.asynchImageLoader._loadImage(d,f);f.unbind(d.event,a.asynchImageLoader._loadOnEvent);d.callback.call(this,d);a.asynchImageLoader._purgeStack(c);},_bufferedEventListener:function(g){var c=g.data.images,d=g.data.options,f=c.data("triggerEl");clearTimeout(c.data("poller"));c.data("poller",setTimeout(function(){c.each(function e(){a.asynchImageLoader._loadImageIfVisible(d,this,f);});a.asynchImageLoader._purgeStack(c);d.callback.call(this,d,c);},d.timeout));return false;},onEvent:function(d,c){c=c||this;if(d.event==="scroll"||d.selector){var e=c.data("triggerEl");if(c.length>0){e.bind(d.event,{images:c,options:d},a.asynchImageLoader._bufferedEventListener);if(d.event==="scroll"||!d.selector){b.resize({images:c,options:d},a.asynchImageLoader._bufferedEventListener);}}else{var f=(d.selector)?a(d.selector):b;f.unbind(d.event,a.asynchImageLoader._bufferedEventListener);}}else{c.bind(d.event,{options:d,images:c},a.asynchImageLoader._loadOnEvent);}},later:function(d){var c=this;if(d.event==="load"){c.each(function(){a.asynchImageLoader._loadImageIfVisible(d,this,c.data("triggerEl"));});}a.asynchImageLoader._purgeStack(c);setTimeout(function(){if(d.event==="load"){c.each(function(){a.asynchImageLoader._loadImage(d,a(this));});}else{c.each(function(){a.asynchImageLoader._loadImageIfVisible(d,this,c.data("triggerEl"));});}a.asynchImageLoader._purgeStack(c);if(d.event==="load+scroll"){d.event="scroll";a.asynchImageLoader.onEvent(d,c);}},d.timeout);},_loadImageIfVisible:function(d,g,f){var e=a(g),c=(d.event==="scroll"?f:b);if(a.asynchImageLoader._isInTheScreen(c,e,d.offset)){a.asynchImageLoader._loadImage(d,e);}},_isInTheScreen:function(j,c,h){var f=j[0]===window,n=j.offset()||{top:0,left:0},g=n.top+(f?j.scrollTop():0),i=n.left+(f?j.scrollLeft():0),e=i+j.width(),k=g+j.height(),m=c.offset(),l=c.width(),d=c.height();return(g-h)<=(m.top+d)&&(k+h)>=m.top&&(i-h)<=(m.left+l)&&(e+h)>=m.left;},_loadImage:function(c,d){d.hide();d.attr("src",d.attr("data-href"));d.removeAttr("data-href");if(c.effect){if(c.speed){d[c.effect](c.speed);}else{d[c.effect]();}}else{d.show();}}};}(jQuery));