Merge branch 'HEAD'

ignite-html-lazyload.js

@@ -1,6 +1,61 @@
 import { IgniteProperty } from "../ignite-html/ignite-html.js";
 import { IgniteTemplate } from "../ignite-html/ignite-template.js";
 
+/**
+ * The helper class that actually watches element.
+ * This uses one global intersection observer that is automatically destroyed
+ * when it's finished to speed up lazy loading and reduce overhead.
+ */
+class IgniteLazyLoad {
+    static watch(element, callback) {
+        //Setup the watching counter if we haven't yet.
+        if (!IgniteLazyLoad.watching) {
+            IgniteLazyLoad.watching = [];
+        }
+
+        //Setup the observer if we haven't yet.
+        if (!IgniteLazyLoad.observer) {
+            IgniteLazyLoad.observer = new IntersectionObserver(results => {
+                results.forEach(result => {
+                    if (result.isIntersecting) {
+                        //Find the watching element
+                        var index = -1;
+                        var watching = null;
+                        for (var i = 0; i < IgniteLazyLoad.watching.length; i++) {
+                            if (IgniteLazyLoad.watching[i].element == result.target) {
+                                index = i;
+                                watching = IgniteLazyLoad.watching[i];
+                                break;
+                            }
+                        }
+
+                        //Invoke the callback
+                        watching.callback();
+
+                        //Remove the watching entry.
+                        IgniteLazyLoad.watching.splice(index, 1);
+
+                        //Unobserve this element.
+                        IgniteLazyLoad.observer.unobserve(result.target);
+                    }
+                });
+
+                //If we have nothing left to watch, stop watching and cleanup.
+                if (IgniteLazyLoad.watching.length == 0) {
+                    IgniteLazyLoad.observer.disconnect();
+                    IgniteLazyLoad.observer = null;
+                }
+            }, { root: null, trackVisibility: true, delay: 1000 });
+        }
+
+        //Add our element to the watching list.
+        IgniteLazyLoad.watching.push({ element: element, callback: callback });
+
+        //Observe this element.
+        IgniteLazyLoad.observer.observe(element);
+    }
+}
+
 /**
  * Lazy loads an image in the src attribute for this element.
  * @param {string|Function|IgniteProperty} placeholder The palceholder image to use before the image is loaded. If null, a default one will be used.
@@ -26,13 +81,15 @@ IgniteTemplate.prototype.lazy = function (placeholder = null) {
             this._attributes["src"] = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=";
         }
 
-        //Add an intersect event to this template.
-        this.onIntersect(() => {
-            if (this._lazy_src) {
-                this._attributes["src"] = this._lazy_src;
-                this.element.setAttribute("src", this._lazy_src);
-                this._lazy_src = null;
-            }
+        //Add a constructor to add our element to the lazy load watcher.
+        this._constructors.push(() => {
+            IgniteLazyLoad.watch(this.element, () => {
+                if (this._lazy_src) {
+                    this._attributes["src"] = this._lazy_src;
+                    this.element.setAttribute("src", this._lazy_src);
+                    this._lazy_src = null;
+                }
+            });
         });
     }