Precarga de imágenes y alternar imágenes
Necesito una precarga de imágenes que funcione para html. Me explico, necesito que cuando pases por encima de un item de un menú (que es una imagen), aparezca otra imagen. Lo que quiero es que todas las imágenes del menú (las que aparecen en primera instancia y las que sustituyen al ponerse encima) estén "precargadas" para que no tarde tanto en cambiarlas (da la sensación de que cada vez que pasas por encima se va a buscarlas).
He probado con javascript distintos (el más conocido el "preloadImages", y he comprobado varias veces que es correcto, pero una vez publicado sigue tardando mucho. Es algo así:
EN EL <HEAD>
<script language="javascript">
function preloadImages() {
var d=document; if(d.images){ if(!d.p) d.p=new Array();
var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a;}}
}
</script>
EN EL <BODY>
<body onLoad="preloadImages('quienes0.gif','quienes1.gif','que0.gif','que1.gif','donde0.gif','donde1.gif','contacta0.gif','contacta1.gif','clima0.gif','clima1.gif','instal0.gif','instal1.gif','')">
¿Es qué es incompatible con algo más que pueda tener mi página? Como el javascript de "AlternarImag" por ejemplo..
Agradecería si conoces alguno que funcione y combine el alternar imagen con el preload.
He probado con javascript distintos (el más conocido el "preloadImages", y he comprobado varias veces que es correcto, pero una vez publicado sigue tardando mucho. Es algo así:
EN EL <HEAD>
<script language="javascript">
function preloadImages() {
var d=document; if(d.images){ if(!d.p) d.p=new Array();
var i,j=d.p.length,a=preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.p[j]=new Image; d.p[j++].src=a;}}
}
</script>
EN EL <BODY>
<body onLoad="preloadImages('quienes0.gif','quienes1.gif','que0.gif','que1.gif','donde0.gif','donde1.gif','contacta0.gif','contacta1.gif','clima0.gif','clima1.gif','instal0.gif','instal1.gif','')">
¿Es qué es incompatible con algo más que pueda tener mi página? Como el javascript de "AlternarImag" por ejemplo..
Agradecería si conoces alguno que funcione y combine el alternar imagen con el preload.
Respuesta de monodrack
1
Pues a simple vista todo se ve bien, y a decir verdad ese es un problema muy común para quienes utilizan preload de imágenes...
La sensación que te da es la correcta, pues siempre que pasas el mousse sobre la imagen, el explorador verificará que la cadena de imágenes se haya cargado en el orden que lo colocaste:
'quienes0.gif','quienes1.gif','que0.gif','que1.gif','donde0.gif','donde1.gif','contacta0.gif','contacta1.gif','clima0.gif','clima1.gif','instal0.gif','instal1.gif'
Sinceramente siento que es mejor eliminar el preloader, pues no solo complica que se carguen las imágenes al momento, sino que satura la conexión del navegante.
El preload se utiliza por ejemplo si vas a poner una hoja de inicio y quieres que cuando pongan el mousse sobre ENTRAR, se comiencen a cargar elementos de la siguiente hoja, a modo de que si el navegante entra, tarde menos en visualizar la hoja completa...
De cualquier modo te recomiendoque bajes lo más que puedas, el peso de tus imágenes (Trata de que las imágenes que cambian sean de una dimensión máxima de unos 300X300 pixeles.
La sensación que te da es la correcta, pues siempre que pasas el mousse sobre la imagen, el explorador verificará que la cadena de imágenes se haya cargado en el orden que lo colocaste:
'quienes0.gif','quienes1.gif','que0.gif','que1.gif','donde0.gif','donde1.gif','contacta0.gif','contacta1.gif','clima0.gif','clima1.gif','instal0.gif','instal1.gif'
Sinceramente siento que es mejor eliminar el preloader, pues no solo complica que se carguen las imágenes al momento, sino que satura la conexión del navegante.
El preload se utiliza por ejemplo si vas a poner una hoja de inicio y quieres que cuando pongan el mousse sobre ENTRAR, se comiencen a cargar elementos de la siguiente hoja, a modo de que si el navegante entra, tarde menos en visualizar la hoja completa...
De cualquier modo te recomiendoque bajes lo más que puedas, el peso de tus imágenes (Trata de que las imágenes que cambian sean de una dimensión máxima de unos 300X300 pixeles.
