web-dev-qa-db-fra.com

Image chargée dans l'événement pour ng-src dans AngularJS

J'ai des images ressemblant à <img ng-src="dynamically inserted url"/>. Lorsqu'une seule image est chargée, je dois appliquer la méthode iScroll refresh () afin de rendre l'image défilable.

Quel est le meilleur moyen de savoir quand une image est complètement chargée pour exécuter un rappel?

javascripthtmlangularjs
104
Sergei Basharov

Voici un exemple comment appeler image onload http://jsfiddle.net/2CsfZ/2/

L'idée de base est de créer une directive et de l'ajouter en tant qu'attribut à la balise 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 />
184
mikach

J'ai un peu modifié cela pour que les méthodes personnalisées $scope puissent être appelées:

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

La directive:

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

J'espère que quelqu'un le trouvera TRÈS utile. Merci @mikach

La fonction doThis() serait alors une méthode $ scope

143
Peter

@ Oleg Tikhonov: Je viens de mettre à jour le code précédent .. @ mikach Merci ..)

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

Ma réponse:

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

Je viens de mettre à jour le code précédent.

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

et directive ...

    .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);
                });
            }
        };
    })
4
Ramiro Spain

C'est la solution que j'ai finalement utilisée.

$ apply () ne devrait être utilisé par des sources externes que dans les bonnes circonstances.

plutôt que d'utiliser Apply, j'ai lancé la mise à jour de la portée vers la fin de la pile d'appels. Fonctionne aussi bien que "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);
            });
        }
    };

}]);
0
Doug