ng-src: montrer une throbber avant une image est chargée

J'ai mis en place une interface où l'utilisateur peut faire défiler un ensemble d'images en cliquant sur les boutons. L'Url de l'image sont stockées dans un tableau et sont remplacés par angular.js dynamiquement:

<img ng-src="{currentUrl}">

Toutefois, les demandes d'images consécutives, ont tendance à traîner un peu et le changement d'image n'est pas visible depuis l'image précédente est affichée jusqu'à ce que la nouvelle arrive.

Je voudrais remplacer cette image par une throbber (gif animé). Comment puis-je obtenir qu'à l'aide de Angular.js?

  • pourquoi ne pas juste utiliser <img src="fake_small_image.gif" données-src="real_image.jpg"> ?
  • Vous ne réalisez que vous êtes plus de 4 ans de retard, n'est-ce pas?
InformationsquelleAutor mingos | 2013-07-03
  1. 21

    vous pouvez le faire avec une directive, qui remplace votre image avec un compteur à chaque fois que le chemin de change et affiche l'image quand il est chargé.

      <img my-src="{currentUrl}">

  app.directive("mySrc", function() {
    return {
      link: function(scope, element, attrs) {
        var img, loadImage;
        img = null;

        loadImage = function() {

          element[0].src = "pathToSpinner";

          img = new Image();
          img.src = attrs.mySrc;

          img.onload = function() {
            element[0].src = attrs.mySrc;
          };
        };

        scope.$watch((function() {
          return attrs.mySrc;
        }), function(newVal, oldVal) {
          if (oldVal !== newVal) {
            loadImage();
          }
        });
      }
    };
  });

    Ce code est généré par coffeescript pour la plupart.

    • battus... et sa a obtenu $y regarder
    • votre réponse est la même chose que ce sparkalow suggéré...
    • Nice one! J'ai essayé la rédaction d'une directive qui permettrait de "parler" à ngSrc, mais a échoué à atteindre ce que je voulais. Votre version des feuilles de ngSrc de l'image complètement et je suppose que c'est l'approche que je doit l'ai pris dès le début. Merci!!!!
    • Peut-être que vous devez appeler loadImage() à la fin de la fonction de lien pour charger l'image initiale
    InformationsquelleAutor Jason Als
  2. 9

    Je sais que c'est assez tard, mais je ne l'aime

    <img src="img/loader.gif" ng-src={{dynamicImageURL}}>

    par défaut de votre chargeur img montrera et plus tard, quand dynamicImageURL est résolu, l'image sera remplacé par angulaire.

    InformationsquelleAutor Furqan Ahmed
  3. 2

    Vous pouvez le faire avec du CSS. Définir l'arrière-plan de la balise img pour le gif animé. L'arrière-plan apparaît jusqu'à ce que l'image est chargée.

        img{
      background-image: url('throbber.gif') no-repeat;
    }
    • Comme je l'ai dit, Angular.js affiche l'image précédente jusqu'à ce que le nouveau est chargé, de sorte que le throbber est en fait jamais affiché enregistrer lorsque la première image est toujours en cours de chargement.
    • Je pense que vous aurez besoin d'un supplément de l'élément dom montrer ensuite. L'élément avec le throbber lorsque le bouton est cliqué et de le cacher lorsque l'image est chargée.
    InformationsquelleAutor sparkalow
  4. 0

    Utiliser une directive, la directive ci-dessous ne fonctionne que pour une seule image, mais vous aurez envie d'utiliser attr.$watch pour détecter les changements de la imageIndex ou attribut src de l'élément.

    myModule.directive('imgLoader', function() {
  return {
     restrict: 'A',
     link: function(scope, element, attrs, controllers) {
        //get the parent and chuck bg image in
        var parent = element.parent();
        parent.css('background-image', 'url("path-to-throbber.gif")');
        parent.css('background-repeat', 'no-repeat');
        //when it loads, hide the bg
        element.load(function() {
           parent.css('background-image','');
           parent.css('background-repeat','');
        });
     }
  }
});

    Vous pouvez toujours pas utiliser le ng-src attribut, mais un autre attribut à regarder, et puis il suffit de définir l'attribut "src" lorsque la source de l'image change.

    Espère que cette aide

    InformationsquelleAutor leon