Merge branch '1907-stop-tile-load-on-mappage'

1 files changed, 31 insertions, 0 deletions

diff --git a/web/js/lazyload.js b/web/js/lazyload.js
new file mode 100644
index 000000000..770fc62d4
--- /dev/null
+++ b/web/js/lazyload.js
@@ -0,0 +1,31 @@
+// jshint esversion: 6
+
+(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');
+            }
+        });
+    }
+})();