Comment puis-je attendre le chargement d'une image après un appel ajax à l'aide de jquery?

Question

J'ai un script Python qui effectue une manipulation sur une image JPEG. Je passe quelques paramètres à ce script et je l'appelle depuis ma page HTML. Le script retourne une balise img src = "newimage.jpg

Je sais comment attendre la réponse du script mais je ne sais pas comment dire quand l'image est complètement chargée (quand c'est le cas, je veux pour l'afficher.) Ce que je reçois maintenant, c'est que l'image se charge lentement, donc l'utilisateur voit ce processus de chargement, mais je veux avoir un message disant à l'utilisateur d'attendre pendant le chargement de l'image, seulement je veux afficher l'image.

Answer 1

Image Loading

Wait for ajaxRequest

Answer 2

Vous pouvez créer dynamiquement une nouvelle image, quelque chose se lier à son événement de charge, et définir la source:

$('<img>').bind('load', function() { 
    $(this).appendTo('body'); 
}).attr('src', image_source); 

Answer 3

Les autres réponses ont mentionné comment le faire avec jQuery, mais quelle que soit la bibliothèque que vous utilisez, en fin de compte, vous serez liez en cas de charge de l'image.

Sans une bibliothèque, vous pourriez faire quelque chose comme ceci:

var el = document.getElementById('ImgLocation'); 

var img = document.createElement('img'); 
img.onload = function() { 
    this.style.display = 'block'; 
} 
img.src = '/path/to/image.jpg'; 
img.style.display = 'none'; 

el.appendChild(img);