Breaking News: Grepper is joining You.com. Read the official announcement!

show image progress download in js

Lucky Llama answered on April 5, 2024 Popularity 1/10 Helpfulness 1/10

answer show image progress download in js

show image progress download in js

Comment

const url = "https://media.istockphoto.com/id/1089385462/photo/free-climber-hangs-one-handed-on-sea-cliff-rock-face.jpg?s=612x612&w=is&k=20&c=qk08FoIwS0EnDYMFnoefjbJ-5GEuyiOrnpUl9ZdD8sM=";
        showImageProgressDownload(url, (progress) => {
            console.log(progress);
        });
        function showImageProgressDownload(url, progressCallback) {
            // Get reference to the image
            const image = new Image();
            image.src = url
            // Get reference to the loading progress element
            const loadingProgress = document.getElementById('loadingProgress');
            // Attach onload event handler to the image
            image.onload = function (e) {
                console.log(e)
                // Image is loaded, hide the loading progress element
                loadingProgress.style.display = 'none';
            };
            // Create new XMLHttpRequest object
            const xhr = new XMLHttpRequest();
            // Open a GET request to the image URL
            xhr.open('GET', image.src);
            // Set the responseType to 'blob' (binary data)
            xhr.responseType = 'blob';
            // Attach an onload event handler to the XMLHttpRequest
            xhr.onprogress = function (pr) {
                const progress = ((pr.loaded / pr.total).toFixed(2) * 100);
                progressCallback(progress)
                //pr.loaded - current state
                //pr.total  - max
            };
            // Send the XMLHttpRequest
            xhr.send();
        }

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: download image javascript progress show

Link to this answer
Share Copy Link

Contributed on Apr 05 2024

Lucky Llama

0 Answers Avg Quality 2/10

show image progress download in js

Contents

More Related Answers

show image progress download in js

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.