web-dev-qa-db-fra.com

Afficher le gif de chargement pendant le chargement de l'image

J'ai créé un code où l'utilisateur peut télécharger des images à partir d'un Zip. Sur la page suivante, je dois afficher toutes les images séparément dans un cadre 85 * 85 px.

Le problème est que le chargement de toutes les images peut prendre un certain temps. Je souhaite donc afficher un gif de chargement pendant que l'utilisateur attend le chargement de l'image.

J'ai défini le src des images sur the loading gifs, tandis que je créais des cases à cocher avec la vraie source comme id

echo "<td><img src=\"beelden/ajax-loader-black-16.png\" id=\"img".$image."\" style=\" width: 85px; height: 85px; border: 1px solid gray; background-color: #fff; padding: 10px;\">";
echo "<input type=\"checkbox\" id=\"img[".$image."]\" name=\"check_image[]\" value=\"".$filename."\" /></td>";
<input type="hidden" name="aantal" id="aantal" value="<?=$image?>" >

Ensuite, j'ai créé du javascript pour vérifier si l'image est chargée, et quand elle l'est, elle est censée remplacer la source de l'image.

<script>
    var aantal = document.getElementById("aantal").value;
    for(var i = 0; i < aantal; i++){
        var source = document.getElementById("img["+i+"]").value;
        var img = new Image();
        img.onload = function(){
            $("#img"+i).attr('src', source);
        }();
        img.src = source;
    }
</script>

Mais cela ne fonctionne pas comme je m'y attendais, je pense que cela se déclenche pour toutes les images dès que la première est chargée. Des idées sur ce que je fais mal ou comment résoudre ce problème?

javascriptjqueryimage
11
PirateSoul

Vous pouvez définir l'arrière-plan d'une image sur le gif de chargement. C'est une simple astuce CSS. Vous n'auriez alors pas besoin de faire un script js.

.loading {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}
<img class="loading" src="http://placehold.it/106&text=1" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
<img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />

Mettre à jour :

Si vous avez des images transparentes, l'histoire devient un peu plus compliquée, mais vous pouvez toujours le faire avec css et certains éléments div.

.image-wrapper {
  overflow: hidden;
  width: 106px;
  height: 106px;
  display: inline-block;
}

.image-wrapper img {
  float: left;
  display: block;
  opacity: 0.2; /* simulating a semitransparent image */
}

.image-wrapper:after, .loading {
  content: ' ';
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif')  center no-repeat ;
  background-size : auto 100%;
  width: 106px;
  height: 106px;
  float: left;
  display: block;
}
<div class="image-wrapper">
  <!-- simulates a hard loading image -->
  <img src="http://placehold.it/not-existing" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=2" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=3" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=4" alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=5"  alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=6"  alt="" />
</div>
<div class="image-wrapper">
  <img src="http://placehold.it/106x106&text=7"  alt="" />
</div>

Malheureusement, le navigateur ajoute une icône cassée ou un ? lors du chargement, c'est pourquoi l'image contient un alt vide;

Mise à jour 2:

La deuxième variante dépend beaucoup de la taille de l'image, si vous avez des tailles différentes, le gif de chargement ne sera pas repoussé correctement, car une alternative serait d'utiliser la première variante et un petit script js qui supprimera l'arrière-plan dès que possible lorsque l'image est chargée:

$('img').load(function(){
   $(this).css('background','none');
});
   .loading {
      background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="loading" src="http://upload.wikimedia.org/wikipedia/en/2/2d/SRU-Logo-Transparent.png" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=2" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=3" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=4" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=5" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=6" width="106px" height="106px" />
    <img class="loading" src="http://placehold.it/106&text=7" width="106px" height="106px" />
38
Tiberiu C.

Solution Angular 8 avec Hostlistener et Hostbinding.

1. Créez une directive d'attribut simple 

@Input('src') imageSrc;

@Hostlistener('load') loadImage(){
this.srcAttr=this.imageSrc;}

@HostBinding('attr.src') srcAttr="../../loader.svg";

Fondamentalement, nous définissons la source d'image initiale sur l'image du chargeur. Une fois l'image chargée (événement de chargement déclenché), nous l'écoutons et définissons la source d'image sur l'image réelle.

2. Utilisez maintenant juste le besoin d'utiliser les attributs créés sur vos images. 

<img imgLoader src='image.jpg'>

L'utilisation de svg ne nécessite aucune modification de style, gif peut nécessiter des modifications css.

Vous pouvez visiter le site Web pour une mise en œuvre fonctionnelle.

3
rohan thakur