From bc7f5f44ed32bfc52d172bfc8817446c3602a474 Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Fri, 4 Nov 2016 03:33:24 -0400 Subject: [PATCH] Improve document page image lazy loading. Use font awesome spinner and CSS3 animation. --- .../appearance/static/appearance/css/base.css | 25 +++++++++++++++--- .../static/appearance/images/loading.png | Bin 796 -> 0 bytes .../appearance/static/appearance/js/base.js | 22 ++++++++++++--- mayan/apps/documents/models.py | 1 - mayan/apps/documents/widgets.py | 12 ++++----- 5 files changed, 46 insertions(+), 14 deletions(-) delete mode 100644 mayan/apps/appearance/static/appearance/images/loading.png diff --git a/mayan/apps/appearance/static/appearance/css/base.css b/mayan/apps/appearance/static/appearance/css/base.css index 49b1bdeb60..a1df431e76 100644 --- a/mayan/apps/appearance/static/appearance/css/base.css +++ b/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; } diff --git a/mayan/apps/appearance/static/appearance/images/loading.png b/mayan/apps/appearance/static/appearance/images/loading.png deleted file mode 100644 index 4146727b17cc20b43e287a5afc24857f7367fc15..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 796 zcmV+%1LOROP)~r?HJ*4eQe#t#|zrMZp+H37VhS-9UF5pkrd3*!M zfsJ4`IBG5E6Tt5p&=2xi1WW-(z$VZHUZxZ<3XBE?@GFY|+EQ>H+yDnbpGN?HkJYw( zsQ;h@&<=qEpatCa2&fk0{%+sm&~CNUttV6@kK|TJK$R}gD+41x z(En>y#81!_cLY2?M*J=?2V4cG!7FXw0Jed{;EThXHM)3l_xv8O^Y-e(c}sX~3`_!B z!492_E^pI;-z7P?0^Mn??!2H2cS|&nc!O{r*rQ%K1&%q+)@2jK1S1#DC5=gQ3z!Y} zg0l{{$61B$KIiK=tcp>ar*Bi4b1(O_KOA-fhQ!hcU}aka?ukhvX^i*2PErJ|PryX5 z9;^j7!9_`T4d;u=tR3K!B;<`a0lY#hz&bH^nia5JJ@6wzM4)i@v%qBS{}z06jdQ(Z z7K=$dbHP(^MM@75CZ)zCAiuJ!lYKO%rTSO8|K%e!Qtapx>V*Q8V> zZ2>f1J=T#s63v3#Am0^V^*AB|ibbR#(W1ea*sW)HMoN#3uz))CVkdYaQLEHBywxyl ztHs=g3*edce^>x*p_o{?EC1jc(&}~h3?N=Z`%1Y4&|53T1nCQP`Je@GGG4_cV#;x6 zsNE%i)}UjU1MX)Lz-Ja;Ml8vX9qn-fIF5OMub&TD1ke~bygt9n5KtV)U`x!LBcd4n aSNjX)4W=QJI_x$80000'); @@ -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) { diff --git a/mayan/apps/documents/models.py b/mayan/apps/documents/models.py index 4599e3a1bc..fc83ad76c9 100644 --- a/mayan/apps/documents/models.py +++ b/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 diff --git a/mayan/apps/documents/widgets.py b/mayan/apps/documents/widgets.py index f935ccd831..6f4ce99345 100644 --- a/mayan/apps/documents/widgets.py +++ b/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( - '' + '
' ) document = document_page.document @@ -167,10 +166,11 @@ def document_page_html_widget(document_page, click_view=None, click_view_argumen ) else: result.append( + ' ' '{}'.format( - image_class, preview_view, post_load_class, - static('appearance/images/loading.png'), alt_text + 'src="{}" alt="{}" />'.format( + image_class, preview_view, + '', alt_text ) )