MediaWiki:Gadget-Common.js

/** Common JavaScript functions used over all skins and platforms. */

RLQ.push(['jquery', function () {
	$(document).ready(function() {
	  var lazyImages = [].slice.call(document.querySelectorAll(".lazy-img"));
	  console.log("Images to lazy load:", lazyImages.length);
	  var lazyBackgrounds = [].slice.call(document.querySelectorAll("[data-bg-lazy]"));
	  console.log("Backgrounds to lazy load:", lazyBackgrounds.length);
	  
	  if ("IntersectionObserver" in window) {
	  	var imageIntersectionHandler = function(entries, observer) {
	      entries.forEach(function(entry) {
	        if (entry.isIntersecting) {
	          var lazyImage = entry.target;
	          if (lazyImage.dataset.src) { lazyImage.src = lazyImage.dataset.src; }
	          if (lazyImage.dataset.srcset) { lazyImage.srcset = lazyImage.dataset.srcset; }
	          lazyImage.classList.remove("lazy-img");
	          lazyImageObserver.unobserve(lazyImage);
	        }
	      });
	    };
	    
	    var bgIntersectionHandler = function(entries, observer) {
	      entries.forEach(function(entry) {
	        if (entry.isIntersecting) {
	          var lazyBg = entry.target;
	          lazyBg.style.backgroundImage = "url('" + lazyBg.dataset.bgLazy + "')";
	          lazyBg.removeAttribute("data-bg-lazy");
	          lazyBgObserver.unobserve(lazyBg);
	        }
	      });
	    };
	    
	    var lazyImageObserver = new IntersectionObserver(imageIntersectionHandler, { rootMargin: "100px" });
	    lazyImages.forEach(function(lazyImage) {
	      lazyImageObserver.observe(lazyImage);
	    });
	    
	    var lazyBgObserver = new IntersectionObserver(bgIntersectionHandler, { rootMargin: "100px" });
	    lazyBackgrounds.forEach(function(lazyBg) {
	      lazyBgObserver.observe(lazyBg);
	    });
	  } else {
	    // Possibly fall back to event handlers here
	    console.log("Lazy Loading seems to have failed.");
	  }
	});
}]);