特定の画像の読み込みが終了したことを検出する

Question

私は、サーバー側のCGIプログラムによって動的に生成されているWebページ上の画像を持っています。定期的に、この画像はタイマによってリフレッシュされ、および/またはユーザ入力に基づいて変更される。だから私はJavascriptのような機能を持っている

// <img id="screen" src=""> is elsewhere in the page 
function reloadImage() { 
    $("#screen").attr("src", make_cgi_url_based_on_form_inputs()); 
} 

これはうまく動作しますが、時にはイメージをロードするのに時間がかかります。ですから、「Loading image ...」と表示されるようなメッセージを表示したいのですが、イメージがロードされブラウザに表示されているときにそのイメージが消えてしまいます。

これを行うことができるJavascriptイベントはありますか？あるいは、イメージをロード/変更/更新し、ロードが終了したとき、Ajaxなどを介して検出できる方法はありますか？

Answer 1

あなたはこのjqueryのソリューションを試してみることができます：http://jqueryfordesigners.com/image-loading/

$(function() { 
     var img = new Image(); 
     $(img).load(function() { 
      //$(this).css('display', 'none'); // .hide() doesn't work in Safari when the element isn't on the DOM already 
      $(this).hide(); 
      $('#loader').removeClass('loading').append(this); 
      $(this).fadeIn(); 
     }).error(function() { 
      // notify the user that the image could not be loaded 
     }).attr('src', 'http://farm3.static.flickr.com/2405/2238919394_4c9b5aa921_o.jpg'); 
    });