web-dev-qa-db-ja.com

AngularJSのng-srcの画像ロードイベント

<img ng-src="dynamically inserted url"/>のような画像があります。単一の画像が読み込まれると、画像をスクロール可能にするためにiScroll refresh（）メソッドを適用する必要があります。

コールバックを実行するために画像が完全にロードされたことを知る最良の方法は何ですか？

javascripthtmlangularjs
104
Sergei Basharov

次に、イメージonloadを呼び出す方法の例を示します http://jsfiddle.net/2CsfZ/2/

基本的な考え方は、ディレクティブを作成し、それを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

これを少し変更して、カスタム$scopeメソッドを呼び出せるようにしました。

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

ディレクティブ：

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

誰かがそれを非常に役に立つと思うことを願っています。ありがとう@mikach

doThis()関数は、$ scopeメソッドになります

143
Peter

@ Oleg Tikhonov：前のコードを更新しました.. @ mikach Thanks ..）

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

私の答え：

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

前のコードを更新しました。

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

およびディレクティブ...

    .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

基本的に、これは私が最終的に使用したソリューションです。

$ apply（）は、適切な状況でのみ外部ソースによって使用されるべきです。

applyを使用するのではなく、コールスタックの終わりに更新するスコープをスローしました。 「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