From 470eb299b656f6741668948e62d0a5021f864530 Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Wed, 1 Oct 2014 04:56:42 -0400 Subject: [PATCH 1/3] Issue #49, add scrollstop event support and use it to optimize document page image loading --- .../main/static/packages/jquery.scrollstop.js | 72 +++++++++++++++++++ mayan/apps/main/templates/base.html | 5 +- 2 files changed, 75 insertions(+), 2 deletions(-) create mode 100644 mayan/apps/main/static/packages/jquery.scrollstop.js diff --git a/mayan/apps/main/static/packages/jquery.scrollstop.js b/mayan/apps/main/static/packages/jquery.scrollstop.js new file mode 100644 index 0000000000..a0bb637100 --- /dev/null +++ b/mayan/apps/main/static/packages/jquery.scrollstop.js @@ -0,0 +1,72 @@ +/* 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) ); + } + }; + +})(); \ No newline at end of file diff --git a/mayan/apps/main/templates/base.html b/mayan/apps/main/templates/base.html index ff9c7055b0..e9fef86ba6 100644 --- a/mayan/apps/main/templates/base.html +++ b/mayan/apps/main/templates/base.html @@ -116,6 +116,7 @@ {% block web_theme_javascript %} + @@ -242,10 +243,10 @@ $('img.lazy-load-carousel').lazyload({ container: $(".carousel-container"), - appear: function(elements_left, settings) { load_document_image($(this)); - } + }, + event: 'scrollstop' }); $('img.lazy-load-interactive').lazyload({ From 3eab590b49c7c5097bdb0c764668e1ad4e8ebea0 Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Wed, 1 Oct 2014 05:00:12 -0400 Subject: [PATCH 2/3] Remove unused variables, remove unused parent lookup, remove unused logging, remove lazy load class after loading --- mayan/apps/main/templates/base.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/mayan/apps/main/templates/base.html b/mayan/apps/main/templates/base.html index e9fef86ba6..e053770459 100644 --- a/mayan/apps/main/templates/base.html +++ b/mayan/apps/main/templates/base.html @@ -212,9 +212,7 @@ container.html(html); } - function load_document_image(image_tag) { - var image = image_tag; - var container = image.parent(); + function load_document_image(image) { $.get( image.attr('data-original'), function( result ) { if (result.status == 'success') { image.attr('src', result.data); @@ -236,14 +234,13 @@ appear: function(elements_left, settings) { load_document_image($(this)); }, - load: function(elements_left, settings) { - console.log(this, elements_left, settings); - } }); $('img.lazy-load-carousel').lazyload({ container: $(".carousel-container"), appear: function(elements_left, settings) { + var $this = $(this); + $this.removeClass('lazy-load-carousel'); load_document_image($(this)); }, event: 'scrollstop' From 7bc2da97efeb25dcedf5bca52ed08333606450f7 Mon Sep 17 00:00:00 2001 From: Roberto Rosario Date: Wed, 1 Oct 2014 05:10:31 -0400 Subject: [PATCH 3/3] Change the data attribute used to avoid javascript mime warnings, remove duplicated $(this) lookup --- mayan/apps/documents/widgets.py | 2 +- mayan/apps/main/templates/base.html | 4 ++-- mayan/apps/sources/widgets.py | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/mayan/apps/documents/widgets.py b/mayan/apps/documents/widgets.py index 91d167f5f9..006c890d1f 100644 --- a/mayan/apps/documents/widgets.py +++ b/mayan/apps/documents/widgets.py @@ -119,7 +119,7 @@ def document_html_widget(document, click_view=None, page=DEFAULT_PAGE_NUMBER, zo if nolazyload: result.append(u'%s' % (preview_view, alt_text)) else: - result.append(u'%s' % (image_class, preview_view, settings.STATIC_URL, alt_text)) + result.append(u'%s' % (image_class, preview_view, settings.STATIC_URL, alt_text)) result.append(u'' % (preview_view, alt_text)) if click_view: diff --git a/mayan/apps/main/templates/base.html b/mayan/apps/main/templates/base.html index e053770459..59ba2f6d01 100644 --- a/mayan/apps/main/templates/base.html +++ b/mayan/apps/main/templates/base.html @@ -213,7 +213,7 @@ } function load_document_image(image) { - $.get( image.attr('data-original'), function( result ) { + $.get( image.attr('data-src'), function( result ) { if (result.status == 'success') { image.attr('src', result.data); } else if (result.detail == 'unknown_file_format') { @@ -241,7 +241,7 @@ appear: function(elements_left, settings) { var $this = $(this); $this.removeClass('lazy-load-carousel'); - load_document_image($(this)); + load_document_image($this); }, event: 'scrollstop' }); diff --git a/mayan/apps/sources/widgets.py b/mayan/apps/sources/widgets.py index e0cbb66fff..5c163f759e 100644 --- a/mayan/apps/sources/widgets.py +++ b/mayan/apps/sources/widgets.py @@ -74,7 +74,7 @@ def staging_file_html_widget(staging_file, click_view=None, page=DEFAULT_PAGE_NU if nolazyload: result.append(u'%s' % (preview_view, alt_text)) else: - result.append(u'%s' % (image_class, preview_view, settings.STATIC_URL, alt_text)) + result.append(u'%s' % (image_class, preview_view, settings.STATIC_URL, alt_text)) result.append(u'' % (preview_view, alt_text)) if click_view: