Comment faire pour afficher le chargement de l'image, tout à l'image réelle est en cours de téléchargement

Question

Quelques images en temps prendre un peu de temps pour le rendu dans le navigateur. Je veux montrer une image complexe, pendant que l'image est en cours de téléchargement, et lorsque l'image est téléchargée, le dynamisme de l'image est supprimée et réelle de l'image est être indiqués. Comment puis-je le faire avec JQuery ou javascript?

Answer 1

Il suffit d'ajouter une image d'arrière-plan pour toutes les images à l'aide de css:

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

Answer 2

Vous pouvez faire quelque chose comme ceci:

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

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

Vous affectez load événement à l'image qui se déclenche lorsque l'image a fini de charger. Avant cela, vous pouvez montrer votre image de chargement.

Answer 3

J'utilise une technique similaire à ce que @Sarfraz posté, sauf qu'au lieu de cacher des éléments, je viens de manipuler la classe de l'image que je suis de chargement.

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

Dans mon cas, parfois, les images ne se charge pas, j'ai la poignée de l'événement onerror pour changer l'image de la classe de sorte qu'il affiche un message d'erreur image d'arrière-plan (plutôt que le navigateur est cassé icône de l'image).

Answer 4

Utiliser un constructeur de javascript avec un rappel qui se déclenche lorsque l'image a fini de se charger, en arrière-plan. Peu utilisé et fonctionne très bien pour moi de la croix-navigateur. Voici le thread avec la réponse.