react-use-lazy-images
Version:
⚛️ Minimal zero dependency lazy load images solution with a simple React Hook for all images of an element
53 lines • 4.19 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = require("react");
function useLazyImages({ placeholderSrc, placeholderSrcset, imagesSelector = 'img' } = {}) {
const ref = react_1.useRef();
react_1.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;
}
exports.useLazyImages = useLazyImages;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaG9vay5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9saWIvaG9vay50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOztBQUFBLGlDQUEyRDtBQVEzRCxTQUFnQixhQUFhLENBQXdCLEVBQ25ELGNBQWMsRUFDZCxpQkFBaUIsRUFDakIsY0FBYyxHQUFHLEtBQUssS0FDWCxFQUFFO0lBQ2IsTUFBTSxHQUFHLEdBQUcsY0FBTSxFQUFLLENBQUE7SUFFdkIsaUJBQVMsQ0FBQyxHQUFHLEVBQUU7UUFDYixJQUFJLENBQUMsR0FBRyxDQUFDLE9BQU8sRUFBRTtZQUNoQixPQUFNO1NBQ1A7UUFFRCxJQUFJLENBQUMsQ0FBQyxzQkFBc0IsSUFBSSxNQUFNLENBQUMsRUFBRTtZQUN2QyxPQUFNO1NBQ1A7UUFFRCxNQUFNLFVBQVUsR0FBaUMsR0FBRyxDQUFDLE9BQU8sQ0FBQyxnQkFBZ0IsQ0FDM0UsY0FBYyxDQUNmLENBQUE7UUFFRCxVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQzdCLElBQUksU0FBUyxDQUFDLE9BQU8sQ0FBQyxHQUFHLElBQUksU0FBUyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEVBQUU7Z0JBQ3JELE9BQU07YUFDUDtZQUVELFNBQVMsQ0FBQyxPQUFPLENBQUMsR0FBRyxHQUFHLFNBQVMsQ0FBQyxHQUFHLENBQUE7WUFDckMsU0FBUyxDQUFDLE9BQU8sQ0FBQyxNQUFNLEdBQUcsU0FBUyxDQUFDLE1BQU0sQ0FBQTtZQUUzQyxJQUFJLGNBQWMsRUFBRTtnQkFDbEIsU0FBUyxDQUFDLEdBQUcsR0FBRyxjQUFjLENBQUE7YUFDL0I7WUFFRCxJQUFJLGlCQUFpQixFQUFFO2dCQUNyQixTQUFTLENBQUMsTUFBTSxHQUFHLGlCQUFpQixDQUFBO2FBQ3JDO1FBQ0gsQ0FBQyxDQUFDLENBQUE7UUFFRixNQUFNLGlCQUFpQixHQUFHLElBQUksb0JBQW9CLENBQUMsT0FBTyxDQUFDLEVBQUU7WUFDM0QsT0FBTyxDQUFDLE9BQU8sQ0FBQyxLQUFLLENBQUMsRUFBRTtnQkFDdEIsSUFBSSxLQUFLLENBQUMsY0FBYyxFQUFFO29CQUN4QixNQUFNLFNBQVMsR0FBRyxLQUFLLENBQUMsTUFBMEIsQ0FBQTtvQkFDbEQsSUFBSSxTQUFTLENBQUMsT0FBTyxDQUFDLEdBQUcsRUFBRTt3QkFDekIsU0FBUyxDQUFDLEdBQUcsR0FBRyxTQUFTLENBQUMsT0FBTyxDQUFDLEdBQUcsQ0FBQTtxQkFDdEM7b0JBQ0QsSUFBSSxTQUFTLENBQUMsT0FBTyxDQUFDLE1BQU0sRUFBRTt3QkFDNUIsU0FBUyxDQUFDLE1BQU0sR0FBRyxTQUFTLENBQUMsT0FBTyxDQUFDLE1BQU0sQ0FBQTtxQkFDNUM7b0JBQ0QsaUJBQWlCLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFBO2lCQUN2QztZQUNILENBQUMsQ0FBQyxDQUFBO1FBQ0osQ0FBQyxDQUFDLENBQUE7UUFFRixVQUFVLENBQUMsT0FBTyxDQUFDLFNBQVMsQ0FBQyxFQUFFO1lBQzdCLGlCQUFpQixDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsQ0FBQTtRQUN0QyxDQUFDLENBQUMsQ0FBQTtRQUVGLE9BQU8sR0FBRyxFQUFFO1lBQ1YsVUFBVSxDQUFDLE9BQU8sQ0FBQyxTQUFTLENBQUMsRUFBRTtnQkFDN0IsaUJBQWlCLENBQUMsU0FBUyxDQUFDLFNBQVMsQ0FBQyxDQUFBO1lBQ3hDLENBQUMsQ0FBQyxDQUFBO1FBQ0osQ0FBQyxDQUFBO0lBQ0gsQ0FBQyxFQUFFLENBQUMsR0FBRyxFQUFFLGNBQWMsRUFBRSxpQkFBaUIsRUFBRSxjQUFjLENBQUMsQ0FBQyxDQUFBO0lBRTVELE9BQU8sR0FBRyxDQUFBO0FBQ1osQ0FBQztBQWhFRCxzQ0FnRUMifQ==