react-use-lazy-images
Version:
⚛️ Minimal zero dependency lazy load images solution with a simple React Hook for all images of an element
50 lines • 4.11 kB
JavaScript
import { useRef, useEffect } from 'react';
export function useLazyImages({ placeholderSrc, placeholderSrcset, imagesSelector = 'img' } = {}) {
const ref = useRef();
useEffect(() => {
if (!ref.current) {
return;
}
if (!('IntersectionObserver' in window)) {
return;
}
const lazyImages = ref.current.querySelectorAll(imagesSelector);
lazyImages.forEach(imageElem => {
if (imageElem.dataset.src || imageElem.dataset.srcset) {
return;
}
imageElem.dataset.src = imageElem.src;
imageElem.dataset.srcset = imageElem.srcset;
if (placeholderSrc) {
imageElem.src = placeholderSrc;
}
if (placeholderSrcset) {
imageElem.srcset = placeholderSrcset;
}
});
const lazyImageObserver = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const lazyImage = entry.target;
if (lazyImage.dataset.src) {
lazyImage.src = lazyImage.dataset.src;
}
if (lazyImage.dataset.srcset) {
lazyImage.srcset = lazyImage.dataset.srcset;
}
lazyImageObserver.unobserve(lazyImage);
}
});
});
lazyImages.forEach(lazyImage => {
lazyImageObserver.observe(lazyImage);
});
return () => {
lazyImages.forEach(lazyImage => {
lazyImageObserver.unobserve(lazyImage);
});
};
}, [ref, placeholderSrc, placeholderSrcset, imagesSelector]);
return ref;
}
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9vay5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvaG9vay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsTUFBTSxFQUFFLFNBQVMsRUFBb0IsTUFBTSxPQUFPLENBQUE7QUFRM0QsTUFBTSxVQUFVLGFBQWEsQ0FBd0IsRUFDbkQsY0FBYyxFQUNkLGlCQUFpQixFQUNqQixjQUFjLEdBQUcsS0FBSyxLQUNYLEVBQUU7SUFDYixNQUFNLEdBQUcsR0FBRyxNQUFNLEVBQUssQ0FBQTtJQUV2QixTQUFTLENBQUMsR0FBRyxFQUFFO1FBQ2IsSUFBSSxDQUFDLEdBQUcsQ0FBQyxPQUFPLEVBQUU7WUFDaEIsT0FBTTtTQUNQO1FBRUQsSUFBSSxDQUFDLENBQUMsc0JBQXNCLElBQUksTUFBTSxDQUFDLEVBQUU7WUFDdkMsT0FBTTtTQUNQO1FBRUQsTUFBTSxVQUFVLEdBQWlDLEdBQUcsQ0FBQyxPQUFPLENBQUMsZ0JBQWdCLENBQzNFLGNBQWMsQ0FDZixDQUFBO1FBRUQsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsRUFBRTtZQUM3QixJQUFJLFNBQVMsQ0FBQyxPQUFPLENBQUMsR0FBRyxJQUFJLFNBQVMsQ0FBQyxPQUFPLENBQUMsTUFBTSxFQUFFO2dCQUNyRCxPQUFNO2FBQ1A7WUFFRCxTQUFTLENBQUMsT0FBTyxDQUFDLEdBQUcsR0FBRyxTQUFTLENBQUMsR0FBRyxDQUFBO1lBQ3JDLFNBQVMsQ0FBQyxPQUFPLENBQUMsTUFBTSxHQUFHLFNBQVMsQ0FBQyxNQUFNLENBQUE7WUFFM0MsSUFBSSxjQUFjLEVBQUU7Z0JBQ2xCLFNBQVMsQ0FBQyxHQUFHLEdBQUcsY0FBYyxDQUFBO2FBQy9CO1lBRUQsSUFBSSxpQkFBaUIsRUFBRTtnQkFDckIsU0FBUyxDQUFDLE1BQU0sR0FBRyxpQkFBaUIsQ0FBQTthQUNyQztRQUNILENBQUMsQ0FBQyxDQUFBO1FBRUYsTUFBTSxpQkFBaUIsR0FBRyxJQUFJLG9CQUFvQixDQUFDLE9BQU8sQ0FBQyxFQUFFO1lBQzNELE9BQU8sQ0FBQyxPQUFPLENBQUMsS0FBSyxDQUFDLEVBQUU7Z0JBQ3RCLElBQUksS0FBSyxDQUFDLGNBQWMsRUFBRTtvQkFDeEIsTUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLE1BQTBCLENBQUE7b0JBQ2xELElBQUksU0FBUyxDQUFDLE9BQU8sQ0FBQyxHQUFHLEVBQUU7d0JBQ3pCLFNBQVMsQ0FBQyxHQUFHLEdBQUcsU0FBUyxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUE7cUJBQ3RDO29CQUNELElBQUksU0FBUyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7d0JBQzVCLFNBQVMsQ0FBQyxNQUFNLEdBQUcsU0FBUyxDQUFDLE9BQU8sQ0FBQyxNQUFNLENBQUE7cUJBQzVDO29CQUNELGlCQUFpQixDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsQ0FBQTtpQkFDdkM7WUFDSCxDQUFDLENBQUMsQ0FBQTtRQUNKLENBQUMsQ0FBQyxDQUFBO1FBRUYsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsRUFBRTtZQUM3QixpQkFBaUIsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLENBQUE7UUFDdEMsQ0FBQyxDQUFDLENBQUE7UUFFRixPQUFPLEdBQUcsRUFBRTtZQUNWLFVBQVUsQ0FBQyxPQUFPLENBQUMsU0FBUyxDQUFDLEVBQUU7Z0JBQzdCLGlCQUFpQixDQUFDLFNBQVMsQ0FBQyxTQUFTLENBQUMsQ0FBQTtZQUN4QyxDQUFDLENBQUMsQ0FBQTtRQUNKLENBQUMsQ0FBQTtJQUNILENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBRSxjQUFjLEVBQUUsaUJBQWlCLEVBQUUsY0FBYyxDQUFDLENBQUMsQ0FBQTtJQUU1RCxPQUFPLEdBQUcsQ0FBQTtBQUNaLENBQUMifQ==