insertar - llamar funcion javascript html sin evento
Esperando que cargue la imagen en Javascript (3)
Estoy haciendo una llamada Ajax que me devuelve cierta información, incluida una ruta de la imagen. Preparo todas esas informaciones en mi HTML que se mostrarán como una especie de ventana emergente. Simplemente alternar la visibilidad de div emergente de oculto a visible.
Para establecer la posición de mi div emergente, debo calcularlo según la altura de la imagen. Por lo tanto, tengo que esperar a que la imagen se cargue para conocer su dimensión antes de establecer la posición y cambiar la visibilidad a visible.
Probé trucos con recursión, setTimeout, propiedad completa de img, mientras bucle ... sin éxito.
Entonces, ¿cómo puedo hacer esto? Tal vez debería devolver dimensiones en mi llamada Ajax.
Si usa jQuery, puede usar su evento de load .
Echa un vistazo al ejemplo:
$(''img.userIcon'').load(function(){
if($(this).height() > 100) {
$(this).addClass(''bigImg'');
}
});
Tenía una imagen lenta de captcha (1st_image) cargando en mi página y quería mostrar otra imagen (2nd_image) solamente DESPUÉS de que se cargue la imagen de captcha (1st_image). Así que tuve que esperar a que la imagen del captcha (1st_image) se cargara primero.
Aquí está la solución que funciona perfectamente bien para esperar a que una imagen se cargue primero y luego cargar otra imagen: (¡No olvide mostrar una imagen de "por favor espere!" Mientras esperan que se cargue otra imagen)
<script>
function checkImageLoad() {
if (document.getElementById("1st_image").complete == true){console.log("1st_image Loaded!");}
document.getElementById("2nd_image").src = "http://domain.com/2nd_image.png";
}
</script>
<body onload="checkImageLoad();">
<img id="1st_image" src="http://domain.com/1st_image.png">
<img id="2nd_image" src="http://domain.com/loading_please_wait.gif">
O bien la velocidad de Internet es lenta o rápida, el navegador esperará a que toda la página cargue con todas las imágenes (incluso si están vinculadas externamente) y luego ejecutará la función, por lo que la segunda imagen se mostrará solo después de que la primera imagen se cargue bien.
Nota avanzada: puede usar una URL de página web en el "src" de la imagen para cargar primero una página web y luego mostrar la imagen. El propósito es cargar la cookie desde la página web externa que podría afectar la segunda imagen mostrada (como captcha)
var img = new Image();
img.onload = function() { alert("Height: " + this.height); }
img.src = "http://path/to/image.jpg";
Tenga en cuenta que es importante hacerlo en el orden anterior: primero conecte el controlador y luego configure el src . Si lo haces al revés, y la imagen está en caché, es posible que te pierdas el evento. JavaScript se ejecuta en un único subproceso en los navegadores (a menos que esté utilizando trabajadores web), pero los navegadores no son de un solo subproceso. Es perfectamente válido que el navegador vea el src , identifique el recurso disponible, lo cargue, active el evento, mire el elemento para ver si tiene algún controlador que deba ponerse en cola para la devolución de llamada, no vea ninguno, y complete el procesamiento de eventos, todo entre la línea src y la línea que conecta el controlador. (Las devoluciones de llamadas no se realizarían entre las líneas si estuvieran registradas, esperarían en la cola, pero si no hay ninguna, no se requiere que el evento espere).