Cuando se declara una imagen con Javascript, el navegador no detiene la carga de la página hasta que la imagen se ha terminado de cargar, sino que continúa la carga de la página y la imagen se descarga en un segundo plano.
El error es pensar que el navegador, al encontrarse con una declaración:
imagen= new Image();
imagen.src="RutaDeLaImagen";
detiene el proceso de carga del resto del código de la página hasta que ha precargado esa imagen en la Caché. Ésto no es así. Al leer el código anterior, el navegador comienza a cargar en segundo plano las imágenes y SIGUE cargando código HTML. Es decir, la carga de imágenes con javascript y la carga del resto de código llegan casi a SOLAPARSE en ocasiones, siendo lo más normal que el navegador llegue a la etiqueta </HTML> sin que una sóla imagen esté en la Caché, pese haberla precargado antes (es decir, instanciado de objetos de la clase Image).
A su vez, al llegar a etiquetas <IMG> también comienza a precargar dichas imágenes en segundo plano,pero COLOCÁNDOLAS A LA COLA (o Queue) de las precargas, es decir, tienen menos prioridad que las declaradas con JavaScript (para que ésto sea así es FUNDAMENTAL precargar las imágenes que nos interesen con JavaScript antes de la etiqueta </HEAD>). Esta prioridad es lo que en programación se conoce como concepto de COLA (F.I.F.O = First In First Out, lo que en nuestro caso se traduce en: la primera imagen que está en la cola para su precarga es la primera que se carga); es, por oposición, lo contrario al concepto de PILA (Stack) que es L.I.F.O (Last In First Out, el último elemento en entrar es el primero en salir).
Así, sobre la precarga de imágenes en Cache, la página con documentación de desarrollo de webs de Netscape Devedge Netscape aclara que:
Dicho ésto, cabe decir que NO debemos pues confundir el evento onLoad que frecuentemente se usa en <BODY> con que una página web esté cargada en su totalidad. Al contrario, con dicho evento sólo detectaremos que el navegador ha leído la última etiqueta de la página, pero imágenes,sonidos, u otros objetos incrustados en la página proseguirán independientemente su carga.
imagen= new Image();
imagen.src="RutaDeLaImagen";
detiene el proceso de carga del resto del código de la página hasta que ha precargado esa imagen en la Caché. Ésto no es así. Al leer el código anterior, el navegador comienza a cargar en segundo plano las imágenes y SIGUE cargando código HTML. Es decir, la carga de imágenes con javascript y la carga del resto de código llegan casi a SOLAPARSE en ocasiones, siendo lo más normal que el navegador llegue a la etiqueta </HTML> sin que una sóla imagen esté en la Caché, pese haberla precargado antes (es decir, instanciado de objetos de la clase Image).
A su vez, al llegar a etiquetas <IMG> también comienza a precargar dichas imágenes en segundo plano,pero COLOCÁNDOLAS A LA COLA (o Queue) de las precargas, es decir, tienen menos prioridad que las declaradas con JavaScript (para que ésto sea así es FUNDAMENTAL precargar las imágenes que nos interesen con JavaScript antes de la etiqueta </HEAD>). Esta prioridad es lo que en programación se conoce como concepto de COLA (F.I.F.O = First In First Out, lo que en nuestro caso se traduce en: la primera imagen que está en la cola para su precarga es la primera que se carga); es, por oposición, lo contrario al concepto de PILA (Stack) que es L.I.F.O (Last In First Out, el último elemento en entrar es el primero en salir).
Así, sobre la precarga de imágenes en Cache, la página con documentación de desarrollo de webs de Netscape Devedge Netscape aclara que:
The resulting image will be obtained from cache, rather than loaded over the network, assuming that sufficient time has elapsed to load and decode the entire image. You can use this technique to create smooth animations, or you could display one of several images based on form input.Una vez leída la etiqueta </HTML> tanto la precarga de imágenes ya declaradas con JavaScript, como las imágenes estáticas que se encuentren en etiquetas HTML siguen su proceso de carga normal hasta completarse.
Dicho ésto, cabe decir que NO debemos pues confundir el evento onLoad que frecuentemente se usa en <BODY> con que una página web esté cargada en su totalidad. Al contrario, con dicho evento sólo detectaremos que el navegador ha leído la última etiqueta de la página, pero imágenes,sonidos, u otros objetos incrustados en la página proseguirán independientemente su carga.
José Alberto Torres Arroyo
Ldo en Publicidad y RR.PP