web-dev-qa-db-ja.com

フルイメージロード後のjavascript実行関数

画像を変更するためのjavascritp$("#hero_image img").attr('src', src);の次の行があります。次の行は、$("#hero_image img").width();を介して呼び出していた画像の新しい幅に基づいて実行します。

ただし、幅を取得する前にこの画像が完全に読み込まれていることを確認するにはどうすればよいですか。そうでない場合は、古い幅で返されます。タイムアウトの設定は十分な信頼性がありません。

javascriptimagecallbackload
14
kalpaitch

幅は、次のように、完全にロードされた後に起動する .load() イベントハンドラーで取得できます。

$("#hero_image img").load(function() {
  alert($(this).width());
}).attr('src', src);

これを行って画像を再利用する場合は、 .load() ハンドラーを1回バインドするか、使用するたびに異なる動作が必要になります .one() なので、addingonloadイベントハンドラーを保持しません：

$("#hero_image img").one('load', function() {
  alert($(this).width());
}).attr('src', src);
19
Nick Craver
$(function(){ // document ready
    $('#hero_image img').bind('load', function(){ // image ready
        // do stuff here
    });
});
2
Josiah Ruddell