3

JavaScript コードで Image オブジェクトを作成しています。「ロード」イベントのハンドラーをこの画像にアタッチしたいと思います。次のコードを使用してこれを実行しようとしていますが、ハンドラー メソッドが呼び出されません。

var img = new Image();
img.src='some url';
img.addEventListener('load', function(){
      //do something
}, false);

私は何か間違ったことをしていますか、それともこれを行う他の方法はありますか? すでに img.onload を試しましたが、うまくいきませんでした。

4

1 に答える 1

2

属性に値を割り当てる前に、イベント リスナーを追加しsrcます。画像が既にブラウザのキャッシュにある場合、属性が設定されloadた直後にイベントが発生する可能性があります。src

Imageまた、画像がダウンロードされる前に自動的に破棄されない変数へのオブジェクトへの参照を保存してください。たとえばImage、関数内でオブジェクトをインスタンス化し、その参照を関数ローカル変数に保存すると、関数の実行が終了した直後にオブジェクトが自動的に破棄される場合があります。これを防ぐには、次のようにオブジェクトへの参照をグローバル変数またはグローバル オブジェクトのプロパティに保存します。

window.example = {
    _images: []
};

example.preloadImage = function(url, callback) {
    var image = new Image;
    image.onload = callback;
    image.src    = url;

    // This prevents the image from destroying after the function is executed.
    example._images.push(image);
};

example.preloadImage('some-image.jpg', function() {
    alert('Image is loaded.');
});
于 2013-04-08T14:32:54.077 に答える