Определить, когда закончилось определенное изображение

Question

У меня есть изображение на веб-странице, которая динамически генерируется программой CGI на стороне сервера. Периодически это изображение обновляется таймером и/или изменяется на основе пользовательского ввода. Поэтому у меня есть функция Javascript, такая как

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

Это работает нормально, но иногда требуется некоторое время, чтобы загрузить изображение. Поэтому я хотел бы, чтобы появилось какое-то сообщение, в котором говорится: «Загрузка изображения ...», но затем это изображение исчезает, когда изображение загружено и отображается в браузере.

Есть ли какие-либо события 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'); 
    });