ng-src: pokaż throbber przed załadowaniem obrazu

Question

Mam zaimplementowany interfejs, w którym użytkownik może cyklicznie przechodzić przez zestaw obrazów, klikając przyciski. Adresy URL obrazu są przechowywane w tablicy i są zastępowane przez angularjs dynamicznie:

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

Jednak wnioski o kolejnych obrazach wydają się nieco w tyle i zmiana obrazu nie jest widoczna, ponieważ jest wyświetlany poprzedni obraz dopóki nie nadejdzie nowa.

Chciałbym zamienić obrazek na throbber (animowany gif). Jak mogę to osiągnąć za pomocą Angular.js?

Answer 1

można to zrobić za pomocą dyrektywy, która zastępuje obraz z turbinki każdej zmianie ścieżki i pokazuje obraz, gdy jest załadowany.

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

Ten kod jest generowany przez coffeescript w przeważającej części.

Answer 2

Można to zrobić za pomocą CSS. Ustaw tło tagu img na animowany GIF. Tło będzie widoczne, dopóki obraz nie zostanie załadowany.

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

Answer 3

Zastosuj dyrektywę, poniższa dyrektywa działa tylko dla jednego obrazu, ale będziesz chciał użyć attr.$watch, aby wykryć zmiany atrybutu imageIndex lub src elementu.

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

Można zawsze nie użyć atrybutu ng-src, ale mają inny atrybut do oglądania, a potem po prostu ustawić atrybut „src”, gdy zmienia się źródło obrazu.

Nadzieja to pomaga

Answer 4

wiem, że dość późno, ale zrobić to tak

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

domyślnie twoja ładowarka img będzie pokazać i później, kiedy dynamicImageURL zostanie rozwiązany, obraz zostanie zastąpiony przez kanciasty.