Cómo mostrar la imagen de carga mientras se descarga la imagen real [duplicado]

Sometimes images take some time to render in the browser. I want to show a busy image while the actual image is downloading, and when the image is downloaded, the busy image is removed and the actual image should be shown. How can I do this with JQuery or any javascript?

preguntado el 08 de enero de 11 a las 18:01

5 Respuestas

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();
});

Usted asigna load event to the image which fires when image has finished loading. Before that, you can show your loader image.

Respondido 11 ago 14, 20:08

I have also used this technique and it works really well. Just remember to handle the error and abort cases... -

@WearetheWorld add handler for the error event. you can do something like $(img).load(handler).error(handler). @see api.jquery.com/error. - Tapas Bose

Would this work for class selector? Like .images? - Doug Molineux

Desafortunadamente, .load in this context has been deprecated since jQuery 1.8. For more recent version of jQuerys, use .on('load', function(){ /* blah */ }); en lugar de. - Fluoxetina

Sarfraz, you can update your answer with @Fluoxetine 's comment. So it can still be a great answer - rpax

Just add a background image to all images using css:

img {
  background: url('loading.gif') no-repeat;
}

Respondido el 08 de enero de 11 a las 21:01

It should help in ADF Applications where javascript exceution is nondeterministic due to partial page rendering. I will give a try for sure :-). - Tapas Bose

Hmm, if an image has transparent areas, then background still can be seen after the image has already loaded. - JustAMartin

@Martin transparent images, indeed, won't work. - Gerben

Although a JS Script when page loads to take away the background image will work. - MasterT

this doesn't work for responsive images, you need to set image size in order to show the background - Dima

I use a similar technique to what @Sarfraz posted, except instead of hiding elements, I just manipulate the class of the image that I'm loading.

<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>

In my case, sometimes images don't load, so I handle the onerror event to change the image class so it displays an error background image (rather than the browser's broken image icon).

Respondido el 08 de enero de 11 a las 21:01

This is different - you're loading the image afuera the page DOM then moving it onto the img element from the browser cache. The method might not work if the image has some sort of no caching HTTP response header. - Edward

Instead of just doing this quoted method from https://stackoverflow.com/a/4635440/3787376,

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();
});

Usted asigna load event to the image which fires when image has finished loading. Before that, you can show your loader image.

you can use a different jQuery function to make the loading image fade away, then be hidden:

// Show the loading image.
$('#loader_img').show();

// When main image loads:
$('#main_img').on('load', function(){
  // Fade out and hide the loading image.
  $('#loader_img').fadeOut(100); // Time in milliseconds.
});

"Once the opacity reaches 0, the display style property is set to none." http://api.jquery.com/fadeOut/

Or you could not use the jQuery library because there are already simple cross-browser JavaScript methods.

Respondido 12 ago 17, 20:08

Use a javascript constructor with a callback that fires when the image has finished loading in the background. Just used it and works great for me cross-browser. Here's the thread with the answer.

contestado el 23 de mayo de 17 a las 13:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.