Comment afficher une image en utilisant AJAX ?

Daidalos June 11, 2019


Exemple de comment afficher une image en utilisant AJAX

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.

Comment afficher une image en utilisant AJAX ?

Si maintenant on ajoute l'image matplotlib-grid-02.png dans le dossier TestLab le code doit afficher l'image:

Comment afficher une image en utilisant AJAX ?

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:

Comment afficher une image en utilisant AJAX ?

Références

Liens Site
Dynamically Load Images: jQuery Looping youtube
Django Tips: Adding a loading image to display during AJAX calls. youtube
File Upload Progress Bar Meter Tutorial HTML5 Ajax PHP youtube
jQuery Tutorials: AJAX Loading Image Graphic youtube
How to Return AJAX Response from Asynchronous JavaScript Call: Methods and Code Examples youtube
Get an image through jQuery AJAX youtube
Call ajax on page load and on click to update data youtube
Asynchronously load images with jQuery stackoverflow
Use jQuery to Asynchronously Load an Image blog.teamtreehouse.com
How do I return the response from an asynchronous call? stackoverflow
Wait until all jQuery Ajax requests are done? stackoverflow
Using async await with jQuery’s $.ajax petetasker.com
ASYNC/AWAIT WILL MAKE YOUR CODE SIMPLER blog.patricktriest.com
Ajax and async await stackoverflow
Moving to promises and async/await from callbacks medium.com
Beginners Guide To Fetching Data With (AJAX, Fetch API & Async/Await) dev.to
Ajax Tutorial – A Guide to Ajax for beginners howtodoinjava.com
jQuery: Return data after ajax call success [duplicate] stackoverflow
jQuery ajax() Method w3schools
AJAX Introduction w3schools
AJAX & Deferreds jqfundamentals.com
How to Use jQuery’s $.ajax() for Asynchronous HTTP Requests sitepoint
jQuery AJAX Example codepen

Licence


Activity


Google Ads