Foros del Web » Creando para Internet » CSS »

cargar imágen

Estas en el tema de cargar imágen en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 18/04/2011, 04:53
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
cargar imágen

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.
  #2 (permalink)  
Antiguo 18/04/2011, 06:18
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: cargar imágen

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??
  #3 (permalink)  
Antiguo 18/04/2011, 06:46
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: cargar imágen

Cita:
Iniciado por IsaBelM Ver Mensaje
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.
  #4 (permalink)  
Antiguo 18/04/2011, 07:33
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 9 años, 5 meses
Puntos: 1010
Respuesta: cargar imágen

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:
<script type="text/javascript">
function precargar() {
var dibujos = Array.prototype.slice.call(arguments);
var urlimagenes = new Array();
for (var i = 0; i < dibujos.length; i ++) {
urlimagenes[i] = new Image();
urlimagenes[i].src = dibujos[i];
}
return urlimagenes;
}

function precargados(urlimagenes) {
var parciales = true;
for (var i = 0; i < urlimagenes.length; i ++)
parciales = (parciales && urlimagenes[i].complete);
return parciales;
}

function porciento(urlimagenes) {
var parciales = 0;
for (var i = 0; i < urlimagenes.length; i ++)
parciales += (urlimagenes[i].complete) ? 1 : 0;
return parseInt(100 * parciales / urlimagenes.length);
}


function continuar() {
document.getElementById('loading').style.display = 'none';
}

function cargando() {
document.getElementById("estado").style.width = porciento(imagenes) + "%";
if (precargados(imagenes))
continuar();
else
setTimeout("cargando()", 100);
}

var imagenes;
function ini(){
imagenes = new precargar(
"./img1.png",
"./img2.png",
"./img3.png"
);

cargando();
}


window.onload = function() {ini();};
</script>
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
  #5 (permalink)  
Antiguo 18/04/2011, 08:44
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: cargar imágen

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.
  #6 (permalink)  
Antiguo 18/04/2011, 09:25
 
Fecha de Ingreso: marzo-2011
Mensajes: 119
Antigüedad: 6 años, 9 meses
Puntos: 9
Respuesta: cargar imágen

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


preloader de imagnes con css
  #7 (permalink)  
Antiguo 18/04/2011, 10:25
 
Fecha de Ingreso: febrero-2007
Mensajes: 109
Antigüedad: 10 años, 9 meses
Puntos: 1
Respuesta: cargar imágen

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

Etiquetas: Ninguno
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:38.