Tengo 100 imágenes en mi proyecto y necesito agregar una clase "lazy-img-bg" y un evento onLoad que elimina la clase una vez que se carga la imagen. Básicamente, estoy mostrando un logotipo mientras la imagen real se carga en su lugar. ¿Hay alguna manera de agregar este evento y clase sin jquery? Las imágenes están en diferentes componentes.
<img onLoad={onImageLoadSuccess} className="lazy-img-bg" src={} />Cree un componente que use el estado para cambiar la clase del componente img y luego muestre sus imágenes usando dicho componente.
Por ejemplo (la imagen descargada tendría un borde rojo):
const { useState } = React; const Img = ({ src }) => { const [loaded, setLoaded] = useState(false) return ( <img onLoad={() => setLoaded(true)} className={ loaded ? '' : 'lazy-img-bg'} src={src} /> ) } ReactDOM.render( <Img src="https://picsum.photos/200/300" />, root ) .lazy-img-bg { width: 200px; height: 300px; border: 2px solid red; } <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>