aboutsummaryrefslogtreecommitdiffstats
path: root/web/js/lazyload.js
diff options
context:
space:
mode:
authorMarius Halden <marius.h@lden.org>2018-05-29 19:37:34 +0200
committerMarius Halden <marius.h@lden.org>2018-05-29 19:37:34 +0200
commit782457d016084c8de04989dbc824a71899f8b41b (patch)
tree56d14e1a988396e43c8693ff3486e40d16962add /web/js/lazyload.js
parent140d40e3eab4cb1e7aa9f95cbc24a0f13180b606 (diff)
parent6e2da95bc6a758c0cf070b9ddd51acc769f7acf1 (diff)
Merge tag 'v2.3.1' into fiksgatami-dev
Diffstat (limited to 'web/js/lazyload.js')
-rw-r--r--web/js/lazyload.js31
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');
+ }
+ });
+ }
+})();