Wydzielenie kodu jQuery obsługującego automatyczne ładowanie obrazków do biblioteki...

diff --git a/project/static/js/jquery.lazyload.js b/project/static/js/jquery.lazyload.js
new file mode 100644 (file)
index 0000000..25c9486
--- /dev/null
+++ b/project/static/js/jquery.lazyload.js
@@ -0,0 +1,43 @@
+(function($) {
+    jQuery.fn.lazyload = function(pattern, options) {
+        var settings = {
+            threshold: 0,
+            scrollThreshold: 300,
+            placeholder: 'loading...',
+            checkInterval: 2000
+        };
+        
+        if (options) {
+            $.extend(settings, options);
+        }
+        
+        var container = this;
+        container.data('lastScroll', -10000);
+        
+        function aboveViewport(container, element, threshold) {
+            return $(container).offset().top >= $(element).offset().top + $(element).height() + threshold;
+        }
+        
+        function belowViewport(container, element, threshold) {
+            return $(container).offset().top + $(container).height() + threshold <= $(element).offset().top;
+        }
+        
+        function checkScroll() {
+            if (Math.abs(container.scrollTop() - container.data('lastScroll')) > settings.scrollThreshold) {
+                container.data('lastScroll', container.scrollTop());
+                
+                $(pattern, container).each(function() {
+                    if (aboveViewport(container, this, settings.threshold)
+                        || belowViewport(container, this, settings.threshold)) {
+                        $(this).html(settings.placeholder);
+                    } else {
+                        $(this).html('<img src="' + $(this).attr('src') + '" width="' + $(this).width() + '" />');
+                    }
+                })
+            }
+            setTimeout(checkScroll, settings.checkInterval);
+        }
+        
+        checkScroll();
+    };
+})(jQuery);

diff --git a/project/templates/explorer/file_html.html b/project/templates/explorer/file_html.html
index b0d16b6..f3fe187 100644 (file)
--- a/project/templates/explorer/file_html.html
+++ b/project/templates/explorer/file_html.html
@@ -3,43 +3,14 @@
 {% block extrahead %}
     <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">        
 {% block extrahead %}
     <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
     <script type="text/javascript" charset="utf-8">        

-        function aboveViewport(container, element, treshold) {
-            return $(container).offset().top >= $(element).offset().top + $(element).height() + treshold;
-        }
-        
-        function belowViewport(container, element, treshold) {
-            return $(container).offset().top + $(container).height() + treshold <= $(element).offset().top;
-        }
-        
-        var TRESHOLD = 600;
-        var lastScroll = -1000;
-                    
-        function checkScroll() {
-            if (Math.abs($('#images').scrollTop() - lastScroll) > 300) {
-                var container = $('#images');
-                lastScroll = container.scrollTop();
-                
-                $('#images .image-box').each(function() {
-                    if (aboveViewport(container, this, TRESHOLD)) {
-                        $(this).html('loading...');
-                    } else if (belowViewport(container, this, TRESHOLD)) {
-                        $(this).html('loading...');
-                    } else {
-                        $(this).html('<img src="' + $(this).attr('src') + '" width="460" height="460"/>');
-                    }
-                })
-            }
-            setTimeout(checkScroll, 2000);
-        }
-        

         $(function() {
             $('#id_folders').change(function() {
                 $('#images').load('/images/' + $('#id_folders').val() + '/', function() {
         $(function() {
             $('#id_folders').change(function() {
                 $('#images').load('/images/' + $('#id_folders').val() + '/', function() {

-                    lastScroll = -1000;
+                    $('#images').data('lastScroll', -1000);

                 });
             });
             
                 });
             });
             

-            setTimeout(checkScroll, 2000);
+            $('#images').lazyload('.image-box', {threshold: 600});

         });
     </script>
 {% endblock extrahead %}
         });
     </script>
 {% endblock extrahead %}

diff --git a/project/templates/explorer/file_xml.html b/project/templates/explorer/file_xml.html
index 08e42e4..5c8dbf0 100644 (file)
--- a/project/templates/explorer/file_xml.html
+++ b/project/templates/explorer/file_xml.html
@@ -2,36 +2,8 @@
 
 {% block extrahead %}
     <script src="/static/js/jquery.fieldselection.js" type="text/javascript" charset="utf-8"></script>
 
 {% block extrahead %}
     <script src="/static/js/jquery.fieldselection.js" type="text/javascript" charset="utf-8"></script>

+    <script src="/static/js/jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>

     <script type="text/javascript" charset="utf-8">        
     <script type="text/javascript" charset="utf-8">        

-        function aboveViewport(container, element, treshold) {
-            return $(container).offset().top >= $(element).offset().top + $(element).height() + treshold;
-        }
-        
-        function belowViewport(container, element, treshold) {
-            return $(container).offset().top + $(container).height() + treshold <= $(element).offset().top;
-        }
-        
-        var TRESHOLD = 600;
-        var lastScroll = -1000;
-                    
-        function checkScroll() {
-            if (Math.abs($('#images').scrollTop() - lastScroll) > 300) {
-                var container = $('#images');
-                lastScroll = container.scrollTop();
-                
-                $('#images .image-box').each(function() {
-                    if (aboveViewport(container, this, TRESHOLD)) {
-                        $(this).html('loading...');
-                    } else if (belowViewport(container, this, TRESHOLD)) {
-                        $(this).html('loading...');
-                    } else {
-                        $(this).html('<img src="' + $(this).attr('src') + '" width="460" height="460"/>');
-                    }
-                })
-            }
-            setTimeout(checkScroll, 2000);
-        }
-        

         function addEditorButton(label, fn) {
             $('<button type="button">' + label + '</button>').click(function(event) {
                 var text = $('#id_text').getSelection().text;
         function addEditorButton(label, fn) {
             $('<button type="button">' + label + '</button>').click(function(event) {
                 var text = $('#id_text').getSelection().text;


@@ -43,14 +15,14 @@
         $(function() {
             $('#id_folders').change(function() {
                 $('#images').load('/images/' + $('#id_folders').val() + '/', function() {
         $(function() {
             $('#id_folders').change(function() {
                 $('#images').load('/images/' + $('#id_folders').val() + '/', function() {

-                    lastScroll = -1000;
+                    $('#images').data('lastScroll', -1000);

                 });
             });
 
             addEditorButton('utwór', function(text) { return '<utwor>' + text + '</utwor>'; });
             addEditorButton('akap', function(text) { return '<akap>' + text + '</akap>'; });
             
                 });
             });
 
             addEditorButton('utwór', function(text) { return '<utwor>' + text + '</utwor>'; });
             addEditorButton('akap', function(text) { return '<akap>' + text + '</akap>'; });
             

-            setTimeout(checkScroll, 2000);
+            $('#images').lazyload('.image-box', {threshold: 600});

         });
     </script>
 {% endblock extrahead %}
         });
     </script>
 {% endblock extrahead %}