[fixmystreet.com] Lazy load images in the footer.

This uses an IntersectionObserver, which currently works in Chrome, Edge, and
Firefox.

1 files changed, 29 insertions, 0 deletions

diff --git a/web/js/lazyload.js b/web/js/lazyload.js
new file mode 100644
index 000000000..50cc8c46e
--- /dev/null
+++ b/web/js/lazyload.js
@@ -0,0 +1,29 @@
+(function(){
+    if (!('IntersectionObserver' in window)) {
+        return;
+    }
+
+    // Now we're here, we can assume quite modern JavaScript!
+
+    const observer = new IntersectionObserver(onIntersection, {
+        rootMargin: "50px 0px"
+    });
+
+    const images = document.querySelectorAll(".js-lazyload");
+    images.forEach(image => {
+        observer.observe(image);
+    });
+
+    function onIntersection(entries, observer) {
+        entries.forEach(entry => {
+            if (entry.intersectionRatio > 0) {
+                // Loading the image is the only thing we care about, so can
+                // stop observing.
+                observer.unobserve(entry.target);
+                // Removing this class (which is suppressing background-image)
+                // will trigger the image load
+                entry.target.classList.remove('js-lazyload');
+            }
+        });
+    }
+})();