¿Cómo se muestra la imagen de carga cuando se está cargando una imagen grande?

¿Cómo se muestra la imagen de carga cuando se está cargando una imagen grande?¿Cómo se muestra la imagen de carga cuando se está cargando una imagen grande?

Como ejemplo en Orkut al ver una foto en el álbum de fotos del usuario, hay una imagen de carga que se muestra sobre la foto hasta que la foto está completamente cargada.

Necesito implementar esa característica.

Mi pregunta es cómo implementar esa característica? ¿Es posible sin usar JQuery?

Por favor ayuda.

Fuente

2009-10-14 Himadri

Aquí es una técnica básica que se puede ampliar para hacer cosas más elaborada con la de hace

<html> 
<head> 
    <title>Test Page</title> 
    <script type="text/javascript"> 
    onload = function() 
    { 
     // Create an image object. This serves as a pre-loader 
     var newImg = new Image(); 

     // When the image is given a new source, apply it to a DOM image 
     // after it has loaded 
     newImg.onload = function() 
     { 
     document.getElementById('test').src = newImg.src; 
     } 

     // Set the source to a really big image 
     newImg.src = "http://apod.nasa.gov/apod/image/0710/iapetus2_cassini_big.jpg";  
    } 
    </script> 
</head> 

<body> 

<img id="test" src="http://upload.wikimedia.org/wikipedia/commons/4/42/Loading.gif" > 

</body> 
</html>

Fuente

2009-11-02 16:02:05

Respuesta definitivamente vale la pena la recompensa. Funciona y explica bien. – matm

Envuelva su imagen en un div (o lo que desee) y configure su imagen de fondo para que sea un gif animado o la imagen de carga que desee. Cuando la imagen termine de cargarse, cubrirá la imagen de fondo. Fácil y puede reutilizarse donde quieras.

<div class="loading"> 
    <img src="bigimage.jpg" alt="test" /> 
</div>

CSS:

.loading{ 
    background:transparent url(loadinggif.gif) center center no-repeat; 
}

Fuente

2009-10-14 05:07:54 NinjaBomb

El envoltorio 'div' no es necesario. Puede aplicar el fondo a la imagen. Además, si la imagen es transparente, la imagen de carga será visible debajo de –

¿Hay alguna otra salida usando asp.net ajax o simple javascript en JQuery? Por favor ayuda. Thaks por tu respuesta. – Himadri

@Himadri: ¿por qué quieres hacerlo más complicado? – Skilldrick

podría utilizar el jQuery Lazy Loading plugin. Le permite especificar una imagen de carga y retrasa la carga de imágenes grandes hasta que se desplacen a la vista.

Fuente

2009-10-14 05:16:23

¿Hay alguna otra salida con asp.net ajax o javascript en lugar de JQuery? Gracias por tu publicación. – Himadri

Editar: Aparentemente, esto ha quedado obsoleto. No hay nada que ver aquí, retírense.

No es necesario JavaScript o CSS para esto. Simplemente use la propiedad incorporada, pero rara vez se oye, de lowsrc para los elementos img.

<img src="giant-image.jpg" lowsrc="giant-image-lowsrc.gif">

La idea básica es crear una versión adicional muy comprimida, posiblemente en blanco y negro de la imagen normal. Se carga primero y cuando se descarga la imagen de resolución completa, el navegador la reemplaza automáticamente. La mejor parte es que no tienes que hacer nada.

Échale un vistazo aquí: http://www.htmlcodetutorial.com/images/_IMG_LOWSRC.html

Fuente

2009-10-14 06:43:52

Ojalá pudiera dar más votos a favor. – eyelidlessness

Me fascinó esta respuesta ya que nunca antes había oído hablar de la propiedad 'lowsrc'. Hice una búsqueda en Google y me encontré con esto: http://blog.throbs.net/2009/05/27/Hey+JLo+Where+Did+LowSRC+Go.aspx Parece indicar que 'lowsrc' está en desuso por Un rato. Las únicas fuentes/páginas que encontré para 'lowsrc' son muy muy antiguas. Tampoco pude usar ninguna de las páginas para probar (y realmente veo el bajo en acción). Tal vez mi conexión es demasiado rápida. – Jim

Desde mi búsqueda en línea, parece que esta propiedad puede ser hackeada utilizando javascript. Si ejecuta la fuente html con el atributo de bajada de imagen a través de http://validator.w3.org/, se mostrará que 'lowsrc' no es un atributo válido. – Jim

vez que hice algo como esto para un problema similar:

<script> 
    function imageLoaded(img) { 
     document.getElementById('loadingImage').style.visibility='hidden'; 
     img.style.visibility='visible'; 
    } 
</script> 
... 
<img id='loadingImage' src='loading.gif'/> 
<img src='bigImage.jpg' style='visibility:hidden;' onload='javascript:imageLoaded(this);'/>

Creo que este enfoque tiene algunas ventajas útiles:

La imagen de carga está oculta. Imagine que su imagen grande no es tan grande como esperaba ...
Puede hacer algunas cosas adicionales en la función javascript. En mi caso, estiré el ancho, la altura o ambos, dependiendo de su tamaño.

Fuente

2009-11-04 17:42:43 sinuhepop

¿Cómo se muestra la imagen de carga cuando se está cargando una imagen grande?

Respuesta

Cuestiones relacionadas