Détection du chargement d'une image spécifique

Question

J'ai une image sur une page Web générée dynamiquement par un programme CGI côté serveur. Périodiquement, cette image est rafraîchie par une minuterie et/ou modifiée en fonction de l'entrée de l'utilisateur. J'ai donc une fonction Javascript comme

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

Cela fonctionne très bien, mais il faut parfois un certain temps pour charger l'image. Je voudrais donc que s'affiche un message disant "Chargement de l'image ..." mais que cette image disparaisse lorsque l'image est chargée et affichée dans le navigateur.

Y a-t-il un type d'événement Javascript qui peut le faire? Sinon, y a-t-il un autre moyen de charger/modifier/mettre à jour une image et de détecter quand le chargement est terminé, via Ajax ou autre?

Answer 1

Vous pouvez essayer cette solution 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'); 
    });