Precarga de imágenes en HTML sin el rectángulo vacío
Bueno mi consulta es muy puntual, tengo un sitio diseñado en HTML (con tablas) y con bastantes imágenes por cada página, y quiero saber si se puede evitar que antes de que cargue cada una de las imágenes jpg o gif aparezca el cuadro vacío, con la cruz roja y el nombre "Alt"... Ya que pasan algunos segundos hasta que se acomoda todo el diseño y resulta muy antiestético en la primera mirada... Es decir quiero que las imágenes carguen pero que no se vean estos cuadros vacíos, que solo se vea el fondo, al menos solo el atributo ALT o nada, y que vayan apareciendo las imágenes solamente.
¿Quizás con algún estilo CSS? (Que no soy muy experto) bueno espero tu respuesta.
El site es diseño imagen corporativa
¿Quizás con algún estilo CSS? (Que no soy muy experto) bueno espero tu respuesta.
El site es diseño imagen corporativa
Respuesta de jask
1
Pues a ver te cuento. Por lo que veo el sitio está muy sobrecargado de imágenes yo que vos intento bajarles de peso, porque a mi me tardó bastante en cargar la web y eso que tengo una linea de 6Mb.
Y en cuanto al cuadradito que mencionás es normal que salga, ojo, es normal, pero no es normal que tarde tanto a ser una imagen tan pequeña. Si ves que bajando el peso de la jpg no te vale intentá cambiarlas a PNG y me contás.
Si no, ya buscaremos otra alternativa :)
Y en cuanto al cuadradito que mencionás es normal que salga, ojo, es normal, pero no es normal que tarde tanto a ser una imagen tan pequeña. Si ves que bajando el peso de la jpg no te vale intentá cambiarlas a PNG y me contás.
Si no, ya buscaremos otra alternativa :)
10 respuestas más de otros expertos
Respuesta de cblaarc
1
Entiendo lo que quieres decir, pero lo único que se me ocurre es que precargues la imágenes antes de que se muestra la página.
De todas formas te puede servir de ayuda alguno de estos enlaces, donde se comenta como realizar la precarga de imágenes
http://www.webtaller.com/construccion/lenguajes/javascript/lecciones/precarga_imagenes.php
http://www.elguruprogramador.com.ar/articulos/precarga-de-imagenes-en-javascript.htm
http://www.desarrolloweb.com/articulos/1171.php
En todo caso, yo he estado cargando la página y parece funcionar bien y va rápida, a mi no me aparecen los recuadros blancos.
De todas formas te puede servir de ayuda alguno de estos enlaces, donde se comenta como realizar la precarga de imágenes
http://www.webtaller.com/construccion/lenguajes/javascript/lecciones/precarga_imagenes.php
http://www.elguruprogramador.com.ar/articulos/precarga-de-imagenes-en-javascript.htm
http://www.desarrolloweb.com/articulos/1171.php
En todo caso, yo he estado cargando la página y parece funcionar bien y va rápida, a mi no me aparecen los recuadros blancos.
Respuesta
1
Para mi tu página carga excelente en mi ordenador la causa del problema que tu tienes se puede deber a varias cosas:
*Tu proveedor de internet
*La velocidad de tu internet
*La memoria fisica de tu computadora
*El sistema operativo de tu computadora
*La pantalla de tu computadora
Pues la verdad soy especialista en todo el campo de la informática y la verdad esto me lleva a la compocicion de tu computador y tu proveedor de internet por lo tanto si quieres más información necesito que me des los datos anteriormente que te di o prueba mirando tu web desde otro computador si el problema persiste por favor vuelve a contactarme si me crees y no tienes más dudas pues dame los puntos para que confíen en mi y finaliza tu pregunta espero que lo que te diga te sea de ayuda
*Tu proveedor de internet
*La velocidad de tu internet
*La memoria fisica de tu computadora
*El sistema operativo de tu computadora
*La pantalla de tu computadora
Pues la verdad soy especialista en todo el campo de la informática y la verdad esto me lleva a la compocicion de tu computador y tu proveedor de internet por lo tanto si quieres más información necesito que me des los datos anteriormente que te di o prueba mirando tu web desde otro computador si el problema persiste por favor vuelve a contactarme si me crees y no tienes más dudas pues dame los puntos para que confíen en mi y finaliza tu pregunta espero que lo que te diga te sea de ayuda
Si no te gusto mi respuesta descarga la pregunta y descalificame y dejame sin puntos pero si te gusto dime algo yo te lo soluciono soy profesional
Respuesta de acv18
1
Te comento un poco la situación. El problema que existe es debido a que las imágenes que se encuentran dentro del código HTML son cargadas conforme el navegador va leyendo las líneas, es decir, que va cargando las imágenes del sitio conforme se las va encontrando, independientemente si son grandes o pequeñas.
Pienso que deberías haberla empezado a hacerla con divs y css, ya que son más flexibles por una sencilla razón, la invocación al css la realizas justo en la cabecera, por lo tanto empieza a cargar las imágenes antes de que se vaya cargando el html.
Otra cuestión importante es el peso de las imágenes, no es lo mismo que una cabecera de imagen te ocupe 100kb a que optimizandola y pudiendo realizar la mayoría de elementos (no todos) por css acabe ocupando 20kb, que con las conexiones de hoy en día mucha gente no lo tiene en cuenta.
El tema del aspa roja es inavitable y propio de IE ya que hasta que no tiene la imagen cargada te saca ambas cosas, en Firefox por ejemplo no te lo hace, sino que simplemente te sacará el atributo alt.
Espero haberte aclarado alguna duda y sino vuelve a preguntar con toda confianza
Pienso que deberías haberla empezado a hacerla con divs y css, ya que son más flexibles por una sencilla razón, la invocación al css la realizas justo en la cabecera, por lo tanto empieza a cargar las imágenes antes de que se vaya cargando el html.
Otra cuestión importante es el peso de las imágenes, no es lo mismo que una cabecera de imagen te ocupe 100kb a que optimizandola y pudiendo realizar la mayoría de elementos (no todos) por css acabe ocupando 20kb, que con las conexiones de hoy en día mucha gente no lo tiene en cuenta.
El tema del aspa roja es inavitable y propio de IE ya que hasta que no tiene la imagen cargada te saca ambas cosas, en Firefox por ejemplo no te lo hace, sino que simplemente te sacará el atributo alt.
Espero haberte aclarado alguna duda y sino vuelve a preguntar con toda confianza
Respuesta
1
Bien, a priori, creo que el problema que tienes es un exceso en el tamaño de las imágenes que estas usando. Te recomiendo que repases todas las imágenes y las almacenes en formato JPG (salvo aquellas que requieran transparencia) a 72 Pixels por Pulgada (más es innecesario puesto que ningún monitor visualiza más resolución) y con un 50 % o 60 % de la calidad original.
Bien, si aun así el problema persiste, lo único que se me ocurre es meter cada imagen en un DIV. Dicho DIV tendrá un width y height acorde con las dimensiones de la imagen, y podrías poner en el fondo de dicho DIV una imagen similar a la que comentas.
La definición del DIV (para una imagen de 200 x 50 pixels) podría ser algo parecido a esto:
Con este ejemplo, si la imagen tardase mucho en cargar, aparecería una cruz en el centro de una caja con las mismas dimensiones de la imagen mientras esta aparece.
Bien, si aun así el problema persiste, lo único que se me ocurre es meter cada imagen en un DIV. Dicho DIV tendrá un width y height acorde con las dimensiones de la imagen, y podrías poner en el fondo de dicho DIV una imagen similar a la que comentas.
La definición del DIV (para una imagen de 200 x 50 pixels) podría ser algo parecido a esto:
<div style='width:250px;height:50px;background-image:url('cruz.jpg');background-position:center center;background-repeat:no-repeat;'>
<img src='tu_imagen_de_250_x_50.jpg' />
</div>Con este ejemplo, si la imagen tardase mucho en cargar, aparecería una cruz en el centro de una caja con las mismas dimensiones de la imagen mientras esta aparece.
Respuesta de jemateos
1
Lo ideal es usar JavaScript
Te paso un ejemplo muy sencillo que funciona bien:
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
x=new Image(150,150);
x.src="ImagenAcargar.jpg";
flagx=false;
function empieza() {
if (x.complete) flagx=true;
window.status="Foto1 Cargada: " + x.complete;
if (flagx) {
foto.src="ImagenAcargar.jpg";
clearTimeout(tiempo);
}
else tiempo=setTimeout('empieza()',500);
}
</script>
</head>
<BODY onLoad="tiempo=setTimeout('empieza()',1000);">
<IMG NAME="foto" src="ImagenParaMostrarPreviamente.jpg" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO">
</BODY>
</HTML>
Suplanta ImagenAcargar.jpg por la imagen que deseas que se vea al terminar de cargarse. Y suplanta ImagenParaMostrarPreviamente.jpg por la imagen que deseas que se vea hasta que termine de cargarse la otra.
Te paso un ejemplo muy sencillo que funciona bien:
<HTML>
<HEAD>
<SCRIPT TYPE="text/javascript">
x=new Image(150,150);
x.src="ImagenAcargar.jpg";
flagx=false;
function empieza() {
if (x.complete) flagx=true;
window.status="Foto1 Cargada: " + x.complete;
if (flagx) {
foto.src="ImagenAcargar.jpg";
clearTimeout(tiempo);
}
else tiempo=setTimeout('empieza()',500);
}
</script>
</head>
<BODY onLoad="tiempo=setTimeout('empieza()',1000);">
<IMG NAME="foto" src="ImagenParaMostrarPreviamente.jpg" WIDTH=150 HEIGHT=150 ALT="PRECARGA FOTO">
</BODY>
</HTML>
Suplanta ImagenAcargar.jpg por la imagen que deseas que se vea al terminar de cargarse. Y suplanta ImagenParaMostrarPreviamente.jpg por la imagen que deseas que se vea hasta que termine de cargarse la otra.
Respuesta de riveradesign
1
Yo abrí la web y solo me apareció el símbolo de jpg, pero no lo de Alt, y la cruz roja tampoco, este símbolo solo aparce cuando la dirección de la imagen no es correcta y el explorador no la encuentra.
Lo de alt quítale ese comando a las imágenes, al menos que quieras ponerle un texto alternativo, cosa que no necesitas en tu web, créale el alt por medio de css si lo necesitas que cambie de imagen al pasar el mouse encima o hazle el código de esta manera...
<input name="inicio" type="button" value="home" /> alli le agregas el img src y todo eso que ya sabes.
Si no resulta escríbeme, estaré aquí pendiente.
Lo de alt quítale ese comando a las imágenes, al menos que quieras ponerle un texto alternativo, cosa que no necesitas en tu web, créale el alt por medio de css si lo necesitas que cambie de imagen al pasar el mouse encima o hazle el código de esta manera...
<input name="inicio" type="button" value="home" /> alli le agregas el img src y todo eso que ya sabes.
Si no resulta escríbeme, estaré aquí pendiente.
Respuesta
1
El tema de la carga de imágenes no depende de la creación sino de la conexión, la velocidad de carga, etc a unos les tardara más en cargar y a otros menos y eso de las aspas rojas no se pueden quitar porque es el icono que aparece automáticamente al no cargar la imagen. Los css no te servirían ya que es para crear una hoja de estilos para no tener que seleccionar parte por parte los párrafos y demás para editarlos sino que te creas esa hoja de estilos y simplemente asignándole el nombre del estilo ya se modifica sola.
Respuesta de Jesus Alberto Acosta Heredia
1
Creo que ya la respondí esta
Respuesta de Fernando Doylet
Respuesta de anuack
Tienes un ejemplo.
No entendí lo que expresaste
No entendí lo que expresaste