Exemple de comment afficher une image en utilisant AJAX
Table des matières
Afficher l'image quand elle existe
L'objectif ici est d'afficher, en utilisant AJAX, une image dans une page html une fois que celle-ci se trouve dans un répertoire donné. Soit le dossier suivant:
/TestLab/test.html
avec le fichier test.html (Note: le nom du dossier TestLab n'est pas important ici, vous pouvez le renommé):
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><div id="x"></div><script>window.onload = function(){var timerForLoadingResult = setInterval(ajaxCall, 1000);function ajaxCall() {$.get("matplotlib-grid-02.png").done(function(){var img = document.createElement("img");img.src = "matplotlib-grid-02.png";var src = document.getElementById("x");src.appendChild(img);console.log('file is ready !');clearInterval(timerForLoadingResult)}).fail(function() {console.log('oups ! file not found ...');})}}</script></body></html>
et prenons par exemple l'image suivante matplotlib-grid-02.png.
Note: pour pouvoir tester localement sur votre machine le code ci-dessus il est nécessaire de lancer un http serveur. Pour cela on peut par exemple utiliser python 3 et lancer la commande suivante dans le terminal:
python -m http.server 8001
puis ouvrir le web browser chrome par exemple et se rendre à l'url suivante http://0.0.0.0:8001/test.html. Avec chrome on peut alors afficher la console javascript en allant dans le menu View -> Developer -> JavaScript Console, permettant ainsi de lancer et de tester le code ci-dessus.
Si maintenant on ajoute l'image matplotlib-grid-02.png dans le dossier TestLab le code doit afficher l'image:
Ajouter un curseur
On peut aussi ajouter un curseur pour indiquer que la page html est en train de chercher l'image. On a utilisée ici une image gif: busy-cursor-gif-8.gif:
<!DOCTYPE html><html lang="en"><head><title>Test</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script></head><body><div id="x"></div><div id="myDIV"><img src="busy-cursor-gif-8.gif"></div><script>window.onload = function(){var timerForLoadingResult = setInterval(ajaxCall, 1000);function ajaxCall() {$.get("matplotlib-grid-02.png").done(function(){var img = document.createElement("img");img.src = "matplotlib-grid-02.png";var src = document.getElementById("x");src.appendChild(img);var x = document.getElementById("myDIV");if (x.style.display === "none") {x.style.display = "block";} else {x.style.display = "none";}console.log('file is ready !');clearInterval(timerForLoadingResult)}).fail(function() {console.log('oups file doesn not exists !');})}}</script></body></html>
Cela permet d'afficher un simple curseur qui disparait une fois l'image trouvée:
