1. ホーム
  2. javascript

[解決済み] AngularJSのng-srcの画像読み込みイベント

2022-10-27 06:33:47

質問

以下のような画像を持っています。 <img ng-src="dynamically inserted url"/> . 一つの画像が読み込まれたら、iScroll refresh()メソッドを適用して、画像をスクロール可能にする必要があります。

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

どのように解決するのですか?

画像のオンロードを呼び出す方法の例を示します。 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 />