Tengo una página para mostrar los datos de los usuarios, como sus imágenes (Personal, Aprendizaje, etc).
Para mostrar imágenes, tengo un Modal. tiene una etiqueta img .
Administrador del sitio web, hace clic en los enlaces y el sitio web abre un modal para él.
¡Pero solo hay 1 modal y una etiqueta img !
El administrador hace clic en la imagen personal de un usuario. El navegador carga la imagen y la muestra en el Modal.
El administrador cierra el modal y abre la foto de la licenciatura del mismo usuario. ¡El navegador primero abre el mismo modal (que contiene la imagen anterior ) y luego carga la nueva imagen!
El administrador ve la imagen anterior por unos momentos y creo que será una mala experiencia para todos los usuarios, especialmente para los usuarios que tienen una red lenta.
Modal, abre por JS. Entonces, ¿cómo puedo asegurarme de que la imagen se haya cargado para abrir el Modal después de eso?
Lo necesito de verdad. ¿Hay alguna idea?
(También uso jQuery).
Una forma sería darles una clase que les dé opacidad: 0 para que no se muestren:
<img src="/path/to/image" class="loading">Y en CSS:
.loading { opacity: 0; }En Head, anulamos eso si JavaScript está deshabilitado (para que no seamos hostiles con los visitantes que no usan JavaScript):
<noscript> <style> .loading { opacity: 1; } </style> </noscript>... y luego en el código en la parte inferior de su página, busque todas sus imágenes y elimine la clase cuando se hayan cargado
(function() { // Get an array of the images var images = Array.prototype.slice.call(document.querySelectorAll("img.loading")); // Hook their load and error events, even though they may have already fired images.forEach(function(image) { image.addEventListener("load", imageDone.bind(null, image)); image.addEventListener("error", imageDone.bind(null, image)); // Could handle errors differently }); // Check to see if any images are already complete checkImages(); function imageDone(img) { img.classList.loading("remove"); images = images.filter(function(entry) { entry != img }); } function checkImages() { images.forEach(function(image) { if (image.complete) { imageDone(image); } }); if (images.length) { // Check back in a second setTimeout(checkImages, 1000); } } })();Ese es un enfoque de cinturón y aparatos ortopédicos. Comprueba de forma proactiva si las imágenes han terminado de cargarse y también gestiona de forma reactiva el evento de carga y error de las imágenes. En teoría, no deberíamos necesitar setTimeout, y podrías hacer pruebas sin él, pero...
Observe cómo una vez que se completa una imagen, eliminamos la clase para que sea visible.