ng-src: zeige einen Throbber, bevor ein Bild geladen wird

Question

Ich habe eine Schnittstelle implementiert, wo der Benutzer durch Klicken auf Schaltflächen eine Reihe von Bildern durchlaufen kann. Die Bild URLs werden in einem Array gespeichert, und werden durch Angularjs dynamisch ersetzt:

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

Jedoch sind die Anforderungen für aufeinanderfolgende Bilder neigen dazu, ein wenig, und die Bildänderung nicht offensichtlich ist, da die Verzögerung vorherige Bild angezeigt wird bis der neue ankommt.

Ich möchte das Bild durch einen Throbber (animiertes Gif) ersetzen. Wie kann ich das mit Angular.js erreichen?

Answer 1

Sie können mit einer Richtlinie dies tun, die mit einer Schleuder Ihres Bild ersetzt, wenn die Pfadänderungen und das Bild zeigen, wenn es geladen wird.

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

Dieser Code wird zum größten Teil von coffeescript generiert.

Answer 2

Sie könnten dies mit CSS tun. Setze den Hintergrund des img-Tags auf das animierte gif. Der Hintergrund wird angezeigt, bis das Bild geladen ist.

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

Answer 3

Verwenden Sie eine Direktive, die folgende Richtlinie funktioniert nur für ein einzelnes Bild, aber Sie wollen attr.$watch verwenden, um Änderungen am imageIndex- oder src-Attribut des Elements zu erkennen.

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',''); 
     }); 
    } 
    } 
}); 

Man konnte immer nicht verwenden, um das ng-src Attribut, aber ein anderes Attribut muss aufpassen, und dann einfach das „src“ -Attribut, wenn die Quellbildänderungen einstellen.

hoffe, das hilft

Answer 4

Ich weiß, es ist ziemlich spät, aber ich mache es wie

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

standardmäßig zeigen Ihren Loader img und später, wenn dynamicImageURL gelöst wird, wird das Bild durch die Winkel ersetzt werden.