MediaWiki:Gadget-Common.js: Difference between revisions
Jump to navigation
Jump to search
Initial setup |
m Using RLQ to make sure jQuery is loaded |
||
Line 1: | Line 1: | ||
/** Common JavaScript functions used over all skins and platforms. */ | /** Common JavaScript functions used over all skins and platforms. */ | ||
$(document).ready(function() { | RLQ.push(['jquery', function () { | ||
$(document).ready(function() { | |||
var lazyImages = [].slice.call(document.querySelectorAll(".lazy-img")); | |||
console.log("Images to lazy load:", lazyImages.length); | |||
if ("IntersectionObserver" in window) { | |||
var lazyImageObserver = new IntersectionObserver(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); | |||
} | |||
}); | |||
}); | |||
lazyImages.forEach(function(lazyImage) { | |||
lazyImageObserver.observe(lazyImage); | |||
}); | |||
} else { | |||
// Possibly fall back to event handlers here | |||
console.log("Lazy Loading seems to have failed."); | |||
}); | } | ||
}); | |||
}]); |
Revision as of 01:02, 19 June 2024
/** 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);
if ("IntersectionObserver" in window) {
var lazyImageObserver = new IntersectionObserver(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);
}
});
});
lazyImages.forEach(function(lazyImage) {
lazyImageObserver.observe(lazyImage);
});
} else {
// Possibly fall back to event handlers here
console.log("Lazy Loading seems to have failed.");
}
});
}]);