Much improved lazy loading

horde · Sep 17, 2014 · 9595488 · 9595488
1 parent 70de3c8
commit 9595488
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 18 deletions.
diff --git a/imp/js/imp.js b/imp/js/imp.js
@@ -8,6 +8,8 @@
 
 var IMP_JS = {
 
+    // lazyload_run,
+
     /**
      * Use DOM manipulation to un-block images.
      */
@@ -157,22 +159,43 @@ var IMP_JS = {
 
     iframeImgLazyLoad: function(iframe)
     {
-        var range_top, range_bottom,
-            mb = $('messageBody'),
-            doc = this.iframeDoc(iframe),
-            resize = this.iframeResize.bindAsEventListener(this, iframe);
+        if (!this.lazyload_run) {
+            this.lazyload_run = true;
+            this.iframeImgLazyLoadRun.bind(this, iframe).delay(0.1);
+        }
+    },
 
-        range_top = mb.scrollTop + mb.cumulativeOffset().top - iframe.cumulativeOffset().top;
-        range_bottom = range_top + mb.getHeight();
+    iframeImgLazyLoadRun: function(iframe)
+    {
+        var count, imgs, mb_height, mb_pad, range_top, range_bottom, resize,
+            mb = $('messageBody');
 
-        Prototype.Selector.select('IMG[data-src]', doc).each(function(img) {
+        resize = function() {
+            if (!(--count)) {
+                this.iframeResize(iframe);
+            }
+        }.bind(this);
+
+        mb_height = mb.getHeight();
+        /* Load messages within 10% of range boundaries. */
+        mb_pad = parseInt(mb_height * 0.1, 10);
+
+        range_top = mb.scrollTop + mb.cumulativeOffset().top - iframe.cumulativeOffset().top - mb_pad;
+        range_bottom = range_top + mb_height + mb_pad;
+
+        imgs = Prototype.Selector.select('IMG[data-src]', this.iframeDoc(iframe)).findAll(Element.visible);
+        count = imgs.size();
+
+        imgs.each(function(img) {
             var co = Element.cumulativeOffset(img);
             if (co.top > range_top && co.top < range_bottom) {
                 img.onload = resize;
                 Element.writeAttribute(img, 'src', Element.readAttribute(img, 'data-src'));
                 Element.writeAttribute(img, 'data-src', null);
             }
         });
+
+        this.lazyload_run = false;
     },
 
     iframeDoc: function(i)

diff --git a/imp/js/smartmobile.js b/imp/js/smartmobile.js
@@ -1746,9 +1746,6 @@ var IMP_JS = {
         id.one('load', function() {
             window.setTimeout(function() {
                 IMP_JS.iframeResize(id);
-                $(d).find('IMG[data-src]').unveil(0, function() {
-                    IMP_JS.iframeResize(id);
-                });
             }, 0);
         });
 
@@ -1768,29 +1765,37 @@ var IMP_JS = {
         id.show().prev().remove();
     },
 
+    lazyLoad: function(id)
+    {
+        var d = $(id.get(0).contentWindow.document),
+            h = id.closest('BODY').height();
+
+        d.find('IMG[data-src]').unveil(parseInt(h * 0.1, 10), function() {
+            $(this).removeAttr('data-src');
+        });
+    },
+
     iframeResize: function(id)
     {
         id = $(id);
         id.height(id.contents().height());
+        IMP_JS.lazyLoad(id);
     },
 
     /**
      * Use DOM manipulation to un-block images.
      */
     unblockImages: function(iframe)
     {
-        var doc = $(iframe.get(0).contentWindow.document),
-            imgload = false;
+        var doc = $(iframe.get(0).contentWindow.document);
 
         $.each(doc.find('[htmlimgblocked]'), function(k, v) {
             v = $(v);
             var src = v.attr('htmlimgblocked');
             v.removeAttr('htmlimgblocked');
 
             if (v.attr('src')) {
-                v.one('load', function() { IMP_JS.iframeResize(iframe); });
-                v.attr('src', src);
-                imgload = true;
+                v.attr('data-src', src);
             } else {
                 if (v.attr('background')) {
                     v.attr('background', src);
@@ -1816,9 +1821,7 @@ var IMP_JS = {
         doc.find('STYLE[type="text/x-imp-cssblocked"]')
             .attr('type', 'text/css');
 
-        if (!imgload) {
-            IMP_JS.iframeResize(iframe);
-        }
+        IMP_JS.iframeResize(iframe);
     }
 
 };