javascript - imagenes - Evento cargado con imagen en ng-src en AngularJS

ng-src angular 5

Question

Tengo imágenes que parecen <img ng-src="dynamically inserted url"/> . Cuando se carga una sola imagen, necesito aplicar el método iScroll refresh () para que la imagen se pueda desplazar.

¿Cuál es la mejor manera de saber cuándo una imagen está completamente cargada para ejecutar alguna devolución de llamada?

Answer 1

@ Oleg Tikhonov: acaba de actualizar el código anterior .. @ mikach Gracias ..)

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 2

Acabo de actualizar el código anterior ...

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

y directiva ...

    .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 3

Aquí hay un ejemplo de cómo invocar image onload http://jsfiddle.net/2CsfZ/2/

La idea básica es crear una directiva y agregarla como atributo a la etiqueta 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 4

Básicamente esta es la solución que terminé usando.

$ apply () solo debe ser utilizado por fuentes externas en las circunstancias adecuadas.

en lugar de usar aplicar, he lanzado el alcance de actualización al final de la pila de llamadas. Funciona tan bien como "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 5

Mi respuesta:

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

Answer 6

Modifiqué esto un poco para que se puedan llamar los métodos de $scope personalizados:

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

La directiva:

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

Espero que alguien lo encuentre MUY útil. Gracias @mikach

La función doThis() sería entonces un método $ scope