Tengo un formulario con varias fotos. Tardan mucho en cargar todas las imágenes. Me gustaría que se muestre una foto de reemplazo antes de subir las fotos. Y luego una foto del formulario, si el navegador de mi usuario ya está cargando todo.
<!-- Basic img --> <img alt="Loader img" src="/home/loader/img-loader.png"> <a href="choice/1/"> <h1>Choice field 1</h1> <img alt="Loader img" src="/image/1.png"> </a> <a href="choice/2/"> <h1>Choice field 2</h1> <img alt="Loader img" src="/image/2.png"> </a> <a href="choice/3/"> <h1>Choice field 3</h1> <img alt="Loader img" src="/image/3.png"> </a> <a href="choice/4/"> <h1>Choice field 4</h1> <img alt="Loader img" src="/image/4.png"> </a> Así que hasta que se cargue la foto <img alt="Loader img" src="/image/1.png"> <img alt="Loader img" src="/image/2.png"> <img alt="Loader img" src="/image/3.png"> <img alt="Loader img" src="/image/4.png"> usuario ve y luego, después de cargar todas las imágenes por el navegador, el usuario ve todo.
Cómo recibir este efecto usando JS/jQuery o CSS/Html
Puede dar a las imágenes una imagen de fondo a través de CSS, pero solo si tienen un atributo de carga de datos. Cuando se active el evento de carga de la imagen, elimine este atributo. Ajuste las dimensiones y las rutas de la imagen según sea necesario.
img[data-loading] { height: 40px; width: 40px; background-image: url(./path/to-background-image.png); }y en el HTML:
<img alt="Loader img" src="/image/4.png" data-loading onload="this.removeAttribute('data-loading')">