Implement lazy loading in smartmobile

horde · Aug 26, 2014 · 72e5499 · 72e5499
1 parent d1d7d58
commit 72e5499
Show file tree

Hide file tree

Showing 5 changed files with 68 additions and 4 deletions.
diff --git a/imp/docs/CHANGES b/imp/docs/CHANGES
@@ -2,7 +2,7 @@
 v6.3.0-git
 ----------
 
-[mms] Implement lazy loading for images in HTML messages in dynamic view.
+[mms] Implement lazy loading for images in HTML messages.
 [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/jquery.mobile/plugins/unveil.js b/imp/js/jquery.mobile/plugins/unveil.js
@@ -0,0 +1,56 @@
+/**
+ * jQuery Unveil
+ * A very lightweight jQuery plugin to lazy load images
+ * http://luis-almeida.github.com/unveil
+ *
+ * Licensed under the MIT license.
+ * Copyright 2013 Luís Almeida
+ * https://github.com/luis-almeida
+ */
+
+;(function($) {
+
+  $.fn.unveil = function(threshold, callback) {
+
+    var $w = $(window),
+        th = threshold || 0,
+        retina = window.devicePixelRatio > 1,
+        attrib = retina? "data-src-retina" : "data-src",
+        images = this,
+        loaded;
+
+    this.one("unveil", function() {
+      var source = this.getAttribute(attrib);
+      source = source || this.getAttribute("data-src");
+      if (source) {
+        this.setAttribute("src", source);
+        if (typeof callback === "function") callback.call(this);
+      }
+    });
+
+    function unveil() {
+      var inview = images.filter(function() {
+        var $e = $(this);
+        if ($e.is(":hidden")) return;
+
+        var wt = $w.scrollTop(),
+            wb = wt + $w.height(),
+            et = $e.offset().top,
+            eb = et + $e.height();
+
+        return eb >= wt - th && et <= wb + th;
+      });
+
+      loaded = inview.trigger("unveil");
+      images = images.not(loaded);
+    }
+
+    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
+
+    unveil();
+
+    return this;
+
+  };
+
+})(window.jQuery || window.Zepto);
diff --git a/imp/js/smartmobile.js b/imp/js/smartmobile.js
@@ -1733,7 +1733,12 @@ var IMP_JS = {
         var d = id.get(0).contentWindow.document;
 
         id.one('load', function() {
-            window.setTimeout(function() { IMP_JS.iframeResize(id); }, 0);
+            window.setTimeout(function() {
+                IMP_JS.iframeResize(id);
+                $(d).find('IMG[data-src]').unveil(0, function() {
+                    IMP_JS.iframeResize(id);
+                });
+            }, 0);
         });
 
         d.open();

diff --git a/imp/lib/Smartmobile.php b/imp/lib/Smartmobile.php
@@ -52,6 +52,7 @@ public function __construct(Horde_Variables $vars)
         $page_output->addScriptFile('smartmobile.js');
         $page_output->addScriptFile('json2.js', 'horde');
         $page_output->addScriptFile('jquery.mobile/plugins/listviewtaphold.js');
+        $page_output->addScriptFile('jquery.mobile/plugins/unveil.js');
         $page_output->addScriptFile('jquery.mobile/plugins/swipebutton.js', 'horde');
         if (IMP_Compose::canCompose()) {
             $page_output->addScriptFile('jquery.mobile/plugins/autocomplete.js', 'horde');

diff --git a/imp/package.xml b/imp/package.xml
@@ -22,7 +22,7 @@
   <email>chuck@horde.org</email>
   <active>no</active>
  </lead>
- <date>2014-08-15</date>
+ <date>2014-08-25</date>
  <version>
   <release>6.3.0</release>
   <api>6.2.0</api>
@@ -33,7 +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] Implement lazy loading for images in HTML messages.
 * [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().
@@ -93,6 +93,7 @@
      <dir name="plugins">
       <file name="listviewtaphold.js" role="horde" />
       <file name="textchange.js" role="horde" />
+      <file name="unveil.js" role="horde" />
      </dir> <!-- /js/jquery.mobile/plugins -->
     </dir> <!-- /js/jquery.mobile -->
     <file name="acl.js" role="horde" />
@@ -1581,6 +1582,7 @@
    <install as="imp/js/external/tinycon.js" name="js/external/tinycon.js" />
    <install as="imp/js/jquery.mobile/plugins/listviewtaphold.js" name="js/jquery.mobile/plugins/listviewtaphold.js" />
    <install as="imp/js/jquery.mobile/plugins/textchange.js" name="js/jquery.mobile/plugins/textchange.js" />
+   <install as="imp/js/jquery.mobile/plugins/unveil.js" name="js/jquery.mobile/plugins/unveil.js" />
    <install as="imp/lib/.htaccess" name="lib/.htaccess" />
    <install as="imp/lib/Api.php" name="lib/Api.php" />
    <install as="imp/lib/Application.php" name="lib/Application.php" />