A veces, las imágenes tardan un tiempo en mostrarse en el navegador. Quiero mostrar una imagen ocupada mientras se descarga la imagen real, y cuando se descarga la imagen, la imagen ocupada se elimina y se debe mostrar la imagen real. ¿Cómo puedo hacer esto con JQuery o cualquier javascript?
Simplemente agregue una imagen de fondo a todas las imágenes usando css:
img { background: url('loading.gif') no-repeat; }Puedes hacer algo como esto:
// show loading image $('#loader_img').show(); // main image loaded ? $('#main_img').on('load', function(){ // hide/remove the loading image $('#loader_img').hide(); }); Asignas un evento de load a la imagen que se activa cuando la imagen ha terminado de cargarse. Antes de eso, puede mostrar la imagen de su cargador.
Uso una técnica similar a la que publicó @Sarfraz, excepto que en lugar de ocultar elementos, solo manipulo la clase de la imagen que estoy cargando.
<style type="text/css"> .loading { background-image: url(loading.gif); } .loaderror { background-image: url(loaderror.gif); } </style> ... <img id="image" class="loading" /> ... <script type="text/javascript"> var img = new Image(); img.onload = function() { i = document.getElementById('image'); i.removeAttribute('class'); i.src = img.src; }; img.onerror = function() { document.getElementById('image').setAttribute('class', 'loaderror'); }; img.src = 'http://path/to/image.png'; </script>En mi caso, a veces las imágenes no se cargan, por lo que controlo el evento onerror para cambiar la clase de imagen para que muestre una imagen de fondo de error (en lugar del ícono de imagen rota del navegador).