Portada | Monotemáticos | Secciones | Desarrolladores | Comunidad | Servicios | Servicios profesionales | RSS
Desde 0 | HTML | CSS | ASP | PHP | AJAX | Javascript | Diseño web | Promoción web | Ganar dinero
Directorio | Manuales | Scripts | FAQs | Programas | Artículos Copyleft | Actualidad | La Cosecha | Colabora
Registrarse | Vuestras páginas | Foros del web | Lista de correo | Boletín de novedades
Generador METAs | Compras | Busca cursos
Alojamiento | Dominios.es | Micropagos SMS | Buscadores | Patentes, marcas | Creación web | Multimedia | Videos
Desarrollo Freelance | Buscar proyectos | Buscar profesionales | Solicitar desarrollo

La explicación del fallo de la precarga de imágenes


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.


27/5/03 - 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:

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.

 Seguir navegando a partir aquí:
+ 1 manual relacionado
+ 1 categoria relacionada

 Autoría, licencia y acciones sobre este artículo

Informe de José Alberto Torres Arroyo*
Ldo en Publicidad y RR.PP
URL: http://web.madritel.es/personales3/joseatorres/home.html

Atención: Copyright. Este artículo no se puede reproducir sin la autorización expresa del autor.

* Para consultas técnicas utilizar la lista de correo.

Versión imprimible Versión imprimible del artículo
Enviar artículo por e-mail Enviar artículo por e-mail
Añadir un comentario al artículo Publicar un comentario del artículo

Manuales relacionados con este artículo
Dentro de Tratamiento de imágenes en Javascript

Categorias relacionadas
A través de las categorías de nuestro directorio se pueden encontrar otro tipo de recursos relacionados con este artículo:
+ Entrar en Javascript


 Comentarios de los visitantes
Aun no hemos recibido comentarios de este artículo.
Puedes ser el primero en enviar tu comentario.



Enlaces:
Maestrosdelweb
  Ir arriba

Manuales relacionados
+Tratamiento de imágenes en Javascript
Categorías
+Javascript

Lectura recomendada

Compra este libro en Agapea, la librería urgente a domicilio.

Tienda DesarrolloWeb

DesarrolloWeb.com | Copyright | Anunciese | Acerca de | Datos legales | Contacta | Por GuiarteMultimedia