37 lines
1.1 KiB
JavaScript
37 lines
1.1 KiB
JavaScript
M.AutoInit();
|
|
|
|
// Set up an intersection observer with some options
|
|
var observer = new IntersectionObserver(lazyLoad, {
|
|
|
|
// where in relation to the edge of the viewport, we are observing
|
|
rootMargin: "100px",
|
|
|
|
// how much of the element needs to have intersected
|
|
// in order to fire our loading function
|
|
threshold: 1.0
|
|
|
|
});
|
|
|
|
function lazyLoad(elements) {
|
|
elements.forEach(image => {
|
|
if (image.intersectionRatio > 0) {
|
|
|
|
// set the src attribute to trigger a load
|
|
image.src = image.dataset.src;
|
|
|
|
// stop observing this element. Our work here is done!
|
|
observer.unobserve(item.target);
|
|
};
|
|
});
|
|
};
|
|
|
|
// If the browser supports lazy loading, we can safely assign the src
|
|
// attributes without instantly triggering an eager image load.
|
|
if ("loading" in HTMLImageElement.prototype) {
|
|
const lazyImages = document.querySelectorAll("img.lazy");
|
|
lazyImages.forEach(img => {
|
|
img.src = img.dataset.src;
|
|
});
|
|
} else {
|
|
// Use our own lazyLoading with Intersection Observers and all that jazz
|
|
} |