react-lazy-img-observer/dist/esm/ImageLazy.min.js

A React component for lazy loading images with Intersection Observer

import{jsx as _jsx}from"react/jsx-runtime";import{useEffect,useRef,useState}from"react";const ImageLazy=({src:e,alt:t,width:r,height:s,className:n,id:a,extraData:i,title:o})=>{const c=useRef(null),[u,l]=useState(!1);return useEffect((()=>{if("undefined"==typeof IntersectionObserver||!c.current)return;const e=new IntersectionObserver((t=>{t.forEach((t=>{t.isIntersecting&&(l(!0),c.current&&(c.current.src=c.current.dataset.src||""),e.unobserve(t.target))}))}),{root:null,rootMargin:"0px",threshold:.5});return e.observe(c.current),()=>{e.disconnect()}}),[e]),_jsx("img",{ref:c,"data-src":e,alt:t,title:o,className:n,width:r,height:s,loading:"lazy",id:a?.toString(),style:{filter:u?"none":"blur(20px)",transition:"filter 0.9s"},...i})};export default ImageLazy;export{ImageLazy};