Bild geladen Ereignis in für ng-src in AngularJS

Question

Ich habe Bilder wie <img ng-src="dynamically inserted url"/> aussehen. Wenn ein einzelnes Bild geladen wird, muss ich die iScroll refresh() -Methode anwenden, um das Bild scrollbar zu machen.

Was ist der beste Weg zu wissen, wann ein Bild vollständig geladen ist, um einen Callback auszuführen? Hier

Answer 1

ist ein Beispiel, wie Bild onload nennen http://jsfiddle.net/2CsfZ/2/

Grundidee ist es, eine Richtlinie erstellen und als Attribut hinzufügen Tag img.

JS:

app.directive('imageonload', function() { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind('load', function() { 
       alert('image is loaded'); 
      }); 
      element.bind('error', function(){ 
       alert('image could not be loaded'); 
      }); 
     } 
    }; 
}); 

HTML:

<img ng-src="{{src}}" imageonload /> 

Answer 2

ich dieses ein wenig verändert, so dass benutzerdefinierte $scope Methoden aufgerufen werden:

<img ng-src="{{src}}" imageonload="doThis()" /> 

Die Richtlinie:

.directive('imageonload', function() { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attrs) { 
       element.bind('load', function() { 
        //call the function that was passed 
        scope.$apply(attrs.imageonload); 
       }); 
      } 
     }; 
    }) 

Hoffe jemand findet es sehr nützlich. @mikach Dank

Die doThis() Funktion dann ein $ scope Methode

Answer 3

@ Oleg Tikhonov wäre: einfach den vorherigen Code aktualisiert .. @ mikach Dank ..)

app.directive('imageonload', function() { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     element.bind('load', function() { 
      alert('image is loaded'); 
     }); 
     element.bind('error', function(){ 
      alert('image could not be loaded'); 
     }); 
    } 
    }; 
}); 

Answer 4

aktualisiert einfach die vorherigen Code ..

<img ng-src="{{urlImg}}" imageonload="myOnLoadImagenFunction"> 

und Richtlinie ...

.directive('imageonload', function() { 
     return { 
      restrict: 'A', 
      link: function(scope, element, attrs) { 
       element.bind('load', function() { 
        scope.$apply(attrs.imageonload)(true); 
       }); 
       element.bind('error', function(){ 
        scope.$apply(attrs.imageonload)(false); 
       }); 
      } 
     }; 
    }) 

Answer 5

Im Grunde ist dies die Lösung, die ich verwendet habe.

$ apply() sollte nur von externen Quellen unter den richtigen Umständen verwendet werden.

eher dann mit anwenden, habe ich den Bereich Aktualisierung bis zum Ende des Aufrufs Stack geworfen. Funktioniert so gut wie "scope. $ Apply (attrs.imageonload) (true);".

window.app.directive("onImageload", ["$timeout", function($timeout) { 

    function timeOut(value, scope) { 
     $timeout(function() { 
      scope.imageLoaded = value; 
     }); 
    } 

    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      element.bind('load', function() { 
       timeOut(true, scope); 
      }).bind('error', function() { 
       timeOut(false, scope); 
      }); 
     } 
    }; 

}]); 

Answer 6

Meine Antwort:

var img = new Image(); 
var imgUrl = "path_to_image.jpg"; 
img.src = imgUrl; 
img.onload = function() { 
     $scope.pic = img.src; 
}