[mms] Implement lazy loading for images in HTML messages in dynamic v…

…iew.
horde · Aug 25, 2014 · fa6a439 · fa6a439
1 parent ee59c74
commit fa6a439
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 6 deletions.
diff --git a/imp/docs/CHANGES b/imp/docs/CHANGES
@@ -2,6 +2,7 @@
 v6.3.0-git
 ----------
 
+[mms] Implement lazy loading for images in HTML messages in dynamic view.
 [mms] Add 'dynamic_prefs' hook to allow for changing of default values for
       browser-based preferences in dynamic view.
 [mms] Removed compose 'use_vfs' configuration option.

diff --git a/imp/js/imp.js b/imp/js/imp.js
@@ -47,15 +47,15 @@ var IMP_JS = {
         }
 
         callback = this.iframeResize.bindAsEventListener(this, iframe);
-        doc = iframe.contentDocument || iframe.contentWindow.document;
+        doc = this.iframeDoc(iframe);
 
         Prototype.Selector.select('[htmlimgblocked]', doc).each(function(img) {
             var src = img.getAttribute('htmlimgblocked');
             img.removeAttribute('htmlimgblocked');
 
             if (img.getAttribute('src')) {
                 img.onload = callback;
-                img.setAttribute('src', src);
+                img.setAttribute('data-src', src);
             } else {
                 if (img.getAttribute('background')) {
                     img.setAttribute('background', src);
@@ -94,7 +94,7 @@ var IMP_JS = {
             return;
         }
 
-        var d = id.contentDocument || id.contentWindow.document, ev;
+        var d = this.iframeDoc(id), ev;
 
         id.onload = function(e) {
             this.iframeResize(e, id);
@@ -132,7 +132,7 @@ var IMP_JS = {
 
         id = $(id);
         if (id) {
-            body = (id.contentDocument || id.contentWindow.document).body;
+            body = this.iframeDoc(id).body;
             html = body.parentNode;
 
             Element.setStyle(body, { height: null });
@@ -150,9 +150,35 @@ var IMP_JS = {
             }
 
             id.setStyle({ height: h + 'px' });
+
+            this.iframeImgLazyLoad(id);
         }
     },
 
+    iframeImgLazyLoad: function(iframe)
+    {
+        var range_top, range_bottom,
+            mb = $('messageBody'),
+            doc = this.iframeDoc(iframe);
+
+        range_top = mb.scrollTop + mb.cumulativeOffset().top - iframe.cumulativeOffset().top;
+        range_bottom = range_top + mb.getHeight();
+
+        Prototype.Selector.select('IMG[data-src]', doc).each(function(img) {
+            var co = Element.cumulativeOffset(img);
+            if (co.top > range_top && co.top < range_bottom) {
+                src = Element.readAttribute(img, 'data-src');
+                Element.writeAttribute(img, 'src', Element.readAttribute(img, 'data-src'));
+                Element.writeAttribute(img, 'data-src', null);
+            }
+        });
+    },
+
+    iframeDoc: function(i)
+    {
+        return i.contentDocument || i.contentWindow.document;
+    },
+
     printWindow: function(win)
     {
         win.print();
@@ -191,6 +217,19 @@ var IMP_JS = {
         }
 
         return hash >>> 0;
+    },
+
+    onDomLoad: function()
+    {
+        var mb = $('messageBody');
+
+        if (mb) {
+            mb.observe('scroll', function() {
+                $('messageBody').select('IFRAME.htmlMsgData').each(this.iframeImgLazyLoad.bind(this));
+            }.bind(this));
+        }
     }
 
 };
+
+document.observe('dom:loaded', IMP_JS.onDomLoad.bind(IMP_JS));
diff --git a/imp/lib/Mime/Viewer/Html.php b/imp/lib/Mime/Viewer/Html.php
@@ -371,7 +371,6 @@ protected function _node($doc, $node)
                         'id' => $id,
                         'imp_img_view' => 'data'
                     )));
-                    $node->setAttribute('src', $val);
                 }
 
                 /* Block images.*/
@@ -385,6 +384,9 @@ protected function _node($doc, $node)
                     $node->setAttribute(self::IMGBLOCK, $url);
                     $node->setAttribute('src', $this->_imgBlockImg());
                     $this->_imptmp['imgblock'] = true;
+                } else {
+                    $node->removeAttribute('src');
+                    $node->setAttribute('data-src', $val);
                 }
             }
 

diff --git a/imp/package.xml b/imp/package.xml
@@ -33,6 +33,7 @@
  </stability>
  <license uri="http://www.horde.org/licenses/gpl">GPL-2.0</license>
  <notes>
+* [mms] Implement lazy loading for images in HTML messages in dynamic view.
 * [mms] Add &apos;dynamic_prefs&apos; hook to allow for changing of default values for browser-based preferences in dynamic view.
 * [mms] Removed compose &apos;use_vfs&apos; configuration option.
 * [mjr] Add IMP_Api::addFlags().

diff --git a/imp/templates/dynamic/message.html.php b/imp/templates/dynamic/message.html.php
@@ -112,7 +112,7 @@
     </div>
    </div>
   </div>
-  <div class="messageBody allowTextSelection">
+  <div id="messageBody" class="messageBody allowTextSelection">
    <?php echo $this->msgtext ?>
   </div>
  </div>