Esperando a que cargue la imagen en Javascript

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.Esperando a que cargue la imagen en Javascript

Para establecer la posición de mi div emergente, tengo que calcularlo según la altura de la imagen. Entonces, 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 img completa, mientras bucle ... sin éxito.

Entonces, ¿cómo puedo hacer esto. Tal vez debería devolver dimensiones en mi llamada Ajax.

Fuente

2010-02-26 Jeenyus

¿por qué no funciona con la propiedad 'Image.complete'? –

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: Primera adjuntar el controlador, a continuación, establecer 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 navegadores no son de un solo subproceso. Es perfectamente válido para el navegador ver el src, identificar el recurso disponible, cargarlo, desencadenar el evento, mirar el elemento para ver si tiene algún controlador que deba ponerse en cola para la devolución de llamada, no ver ninguno, y completar el procesamiento de eventos, todo entre la línea src y la línea que conecta el controlador. (Las devoluciones de llamada no ocurrirían entre las líneas si estuvieran registradas, esperarían en la cola, pero si no hay ninguna, el evento no está obligado a esperar.)

Fuente

2010-02-26 14:18:42

+1 - Esto es lo que habría publicado. –

¡Grat! Por cierto: soy bastante ignorante sobre el tema AJAX, pero solo en caso de que una imagen obtenida con AJAX se guarde en caché de la misma manera que una imagen escrita en código HTML, eventualmente podría agregar esto para evitar el almacenamiento en caché de imágenes del navegador (obviamente solo si lo necesita): img.src = "http: //path/to/image.jpg" + "? refresh =" + new Date(). getTime(); –

@Marco O configure 'cache: false' en el XHR :) Aunque no creo que sea relevante aquí porque la llamada AJAX devuelve una URL a la imagen, no la imagen en sí. Pero sí, supongo que todavía podría usar un valor de cadena de consulta aleatoria para asegurarse de que no ocurra el almacenamiento en caché de agente de usuario. –

Si usa jQuery, puede usar su evento load.

Tenga una mirada en el ejemplo:

$('img.userIcon').load(function(){ 
    if($(this).height() > 100) { 
     $(this).addClass('bigImg'); 
    } 
});

Fuente

2010-02-26 14:16:51 Sagi

-1: no se menciona a jQuery en la pregunta, por lo que una respuesta como esta puede ser bastante confusa. –

+46

No utilice jquery a menos que se solicite jquery –

Tenga en cuenta también las siguientes advertencias con el método de carga cuando se utiliza con imágenes (tomado de http: //api.jquery.com/load-event /): > No funciona de manera consistente ni fiable entre navegadores > No se activa correctamente en WebKit si la imagen está configurada en el mismo hardware que antes > No funciona burbuja correctamente el árbol DOM > Puede dejar de disparar para las imágenes que ya viven en el caché del navegador –

Tuve un captcha lento (1st_image) carga de imagen 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 se cargue primero la imagen de captcha (1st_image).

Aquí está la solución que funciona perfectamente bien para esperar que una imagen se cargue primero y luego cargar otra imagen: (No olvide mostrar una imagen de "espere por favor!" 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 va a esperar a que toda la página se cargue con todas las imágenes (incluso si están vinculados externamente) y luego ejecutar la función, por lo que la segunda imagen se muestra sólo 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 el captcha)

Fuente

2016-05-01 12:15:13 Tarik

Esperando a que cargue la imagen en Javascript

Respuesta

Cuestiones relacionadas