ng-src: mostra un throbber prima che un'immagine sia caricata

Question

Ho implementato un'interfaccia in cui l'utente può scorrere una serie di immagini facendo clic sui pulsanti. Gli URL di immagine sono memorizzati in un array e sono sostituiti da angular.js dinamicamente:

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

Tuttavia, le richieste di immagini consecutive tendono ad essere in ritardo un po 'e la modifica immagine non è evidente in quanto viene visualizzata l'immagine precedente fino a quando arriva il nuovo.

Vorrei sostituire l'immagine con un bagliore (gif animato). Come posso ottenerlo usando Angular.js?

Answer 1

si può fare questo con una direttiva che sostituisce la vostra immagine con un filatore ogni volta che i cambiamenti di percorso e mostra l'immagine quando viene caricato.

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

Questo codice è generato da coffeescript per la maggior parte.

Answer 2

È possibile farlo con i CSS. Imposta lo sfondo del tag img nella gif animata. Lo sfondo verrà mostrato fino a quando l'immagine non viene caricata.

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

Answer 3

Utilizzare una direttiva, la direttiva riportata di seguito funziona solo per una singola immagine ma si vorrà utilizzare attr.$watch per rilevare le modifiche all'attributo imageIndex o src dell'elemento.

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

Si può sempre non utilizzare l'attributo ng-src, ma hanno un altro attributo a guardare, e poi semplicemente impostare l'attributo "src" quando l'immagine fonte modifiche.

Spero che questo aiuti

Answer 4

So che la sua piuttosto tardi, ma lo faccio come

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

è preimpostato img loader mostrare e più tardi, quando dynamicImageURL viene risolto, l'immagine sarà sostituito da angolare.