async or sync? cuando establecemos la propiedad src del objeto Imagen?

Question

var img=new Image(); 
img.src='xxxxx'; 

¿El navegador esperará a que la imagen se cargue y luego ejecutará la siguiente línea de código?

Answer 1

Esa acción es asincrónica; una gran cantidad de código de "carga previa" de imágenes se basa en esa característica.

EDITAR: Para dar un poco más de información útil también. Si tienes intención de tener ciertas acciones esperan de forma sincronizada para que las imágenes se cargan a través del objeto de imagen de JavaScript, puede utilizar el proceso de carga, así:

var img = new Image(); 
img.onload = function() { /* onLoad code here */ }; 
img.src = 'xxxxxx'; 

Answer 2

var img = new Image();

Esta es la forma antigua de crear imágenes, que ha quedado en desuso. Prefiera document.createElement('IMG') o cree uno a través de cadenas y innerHTML.

Ahora, las imágenes son replaced elements, lo que significa que se cargan cada vez que llegan, pero el espacio está reservado para ellas en el flujo de disposición si se especifican sus dimensiones. (Si no, se reserva un espacio del tamaño de un icono y la pantalla se vuelve a dibujar cuando la imagen llega con sus dimensiones en el encabezado; esto puede ser una experiencia de usuario desconcertante, por lo que se recomienda tener las dimensiones de imagen listas mientras se está procesando la primera vez.)

Answer 3

De acuerdo con @dereleased la precarga de imágenes se hace de forma asíncrona; Solo pensé que agregaría que hay varias maneras de usar esta técnica en el objeto Image() en javascript, como usar arreglos o manejadores de eventos.

https://web.archive.org/web/1/http://articles.techrepublic%2ecom%2ecom/5100-10878_11-5214317.html

Answer 4

Cambio src es asíncrona.

El código

image.src = "http://newimage-url";

devolverá inmediatamente y el navegador se carga nueva imagen en otro hilo. Antes de que esté completamente cargado, todos los atributos de esa etiqueta <img> no serán correctos, como el ancho o el alto.

Así que $(image).width() puede que no devuelva el ancho de la nueva imagen.

Como señaló @Dereleased, puede implementar un método 'en carga', cuyo código se ejecutará solo después de que la imagen haya terminado de cargarse. jQuery's load() puede cumplir esto fácilmente.