Libellés

Exemple : Barre de progression XML HTTP (Ajax) et Javascript 

<!DOCTYPE html>
<html lang="fr">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <progress id="download-progress" max="100" value="0"></progress>
    <br>
    <img id="image" src="loading.gif" alt="" style="max-width: 100%;">
    <script>

        // l'image à charger
        image = document.getElementById("image");

        // la barre de progression
        progressBar = document.getElementById("download-progress");

        // l'url à charger
        url = "photo.jpg";

        xHTTP = new XMLHttpRequest();
        xHTTP.open('GET', url, true);
        
        // on veut une image donc un tableau de données
        xHTTP.responseType = 'arraybuffer';

        // quand les données sont chargées
        xHTTP.onload = function (e) {
            // on créé un objet binaire
            var blob = new Blob([this.response]);
            // on créé l'image avec le blob
            image.src = window.URL.createObjectURL(blob);
        };

        xHTTP.onprogress = function (e) {
            // on trouve la valeur en pourcentage et on change la valeur
            progressBar.value = parseInt((e.loaded / e.total) * 100);
        };

        xHTTP.send();

    </script>
</body>

</html>

Vous pouvez réduire votre connexion en mettant Low-end mobile dans la console de développement de Google Chrome.

Le résultat :

Envoyer l'article par e-mail
Libellés :

Commentaires

Enregistrer un commentaire