cargar imágen

cuideru · #1 (**permalink**) 18/04/2011, 03:53

Hola, acabo de subir una web en Css y me encuentro con un problema:

Tengo como fondo un color plano, pero dentro de una de las cajas hay una imágen que me gustaría que se cargara al entrar, antes que el texto. He utilizado para precargar rollovers un código en javascript que va bien, pero lo probé para cargar esa imágen y no me parece que funcione. Alguna sugerencia? La url es:

http://www.nikiboeschenstein.com/

Gracias por adelantado.

IsaBelM · #2 (**permalink**) 18/04/2011, 05:18

una precarga de imágenes sirve para que estén cargadas en el momento es que se soliciten. qué es, según tu, lo que no funciona??

cuideru · #3 (**permalink**) 18/04/2011, 05:46

Cita:

Iniciado por IsaBelM

una precarga de imágenes sirve para que estén cargadas en el momento es que se soliciten. qué es, según tu, lo que no funciona??

Gracias por contestar IsabelM,

Lo que me gustaría es que cargue la imágen antes que el texto, ya que la imágen queda en mi diseño como uno de los fondos. Creo que lo que sucede es que esa imágen pesa más de lo que me gustaría, 80kbs, y ya no puedo optimizarla más. Lo único que se me ocurre es que la cargue antes que cualquier otra cosa.

Para ello he utilizado el mismo código que uso para la precarga de imágenes (rollovers) en una de las páginas, pero tengo la sensación de que no hace lo que quiero en el caso del fondo.

IsaBelM · #4 (**permalink**) 18/04/2011, 06:33

yo no aprecio este problema que comentas. de cualquier modo, puedes mostrar un div con opacidad hasta que todo el contenido esté cargado. el css es mas o menos este

Cita:

#loading {
display: block;
background-color: #111;
text-align: center;
width: 100%;
min-height: 100%;
height: auto !important;
filter: alpha(opacity=80);
opacity: .80;
z-index: 1000;
position: fixed;
top: 0px;
left: 0px;
}

#loading img{
padding-top: 24px;
}

#barra_porcentaje {
font: bold 13px Helvetica, Arial, sans-serif;
text-align: center;
width: 100px;
height: 20px;
border: 1px solid #424141;
position: absolute;
top: 57%;
left: 47%;
}

el js para hacer la precaga

Cita:

el html para mostrar el div con opacidad y una barra de cargando..

Cita:

<body>
<div id="loading">
<div id="barra_porcentaje">
<div style="position:absolute;top:0;left:0;width:100%;h eight: 100%;background-color:#282828"></div>
<div id="estado" style="position:absolute;top:0;left:0;width:1%;hei ght:100%;background-color: #333"></div>
</div>
</div>

resto de la web

cuideru · #5 (**permalink**) 18/04/2011, 07:44

Gracias por la contestación, voy a probar esa idea. De paso pongo mi código de precarga por si a alguien le viene bien:

Código:

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

y entonces en el body:

Código:

<body onLoad="MM_preloadImages('imagen.jpg','imagen2.jpg')">

por si alguien no lo supiera, en imagen.jpg se pone la ruta a las imágenes que se desean precargar.

saul123 · #6 (**permalink**) 18/04/2011, 08:25

Hola
quiza poniendo un preloaded es lo necesites , pero no es notorio el tiempo de demora .

preloader de imagnes con css

cuideru · #7 (**permalink**) 18/04/2011, 09:25

Gracias por la idea, me parece que no es lo que necesito. El problema en este caso es que los fondos utilizados pesan más de lo deseable. De momento la idea que se me ocurrió fue meter la precarga del fondo en javascript para que el fondo cargara antes que los textos, lo contrario resultaba muy feo. A pesar de que el código de precarga que puse antes funciona, puesto que lo he metido para cargar los rollovers de la sección /prensa, y va bien. Me parecía que no daba el resultado que yo quería respecto a la carga del fondo, y por eso preguntaba.

Había llegado a la conclusión también de que no podía optimizar más la imagen de fondo, pero acabo de ver que lo que no me permite rebajar más el peso del archivo es el nombre en rojo. Quizá si lo meto como imagen en una caja aparte consiga que la página cargue antes, y así se reduzca el pestañeo de un documento a otro. Eso lo tengo que ver.

He añadido sólo a la versión en inglés/multimedia esa precarga del fondo. El resto está sin ella. Por si alguien quiere comparar.

La url es: www.nikiboeschenstein.com