Display how many kilobytes are remaining to download

Question

Display how many kilobytes are remaining to download

Can JavaScript be used to display the remaining file size (in kb) needed to fully download a gif file from a remote server?

    function downgif(id, img){
    //show downloading
    Show('downloadgif');
    
    //change image
    document.getElementById(id).src=img;
   
   //test if complete
    var completeInterval = null, renderedInterval = null, count = 0;
    var theImg = document.getElementById(id);
    theImg.src = img;
    // Wait for image to be loaded (but not necessarily rendered)
    completeInterval = setInterval(function() {
      if (theImg.complete) {
        // Cancel checking once IMG is loaded OR we've tried for ~9s already
        clearInterval(completeInterval);
        completeInterval = null;
          // IMG is now 'complete' - but that just means it's in the render queue...
          // Wait for naturalWidth and naturalHeight to be > 0 since this shows
          // that the image is done being RENDERED (not just 'loaded/complete')
          renderedInterval = setInterval(function() {
            if (theImg.naturalHeight > 0 && theImg.naturalWidth > 0) {
              clearInterval(renderedInterval);
              renderedInterval = null;

              //hide downloading
              Hide('downloadgif');
            }
          }, 100);
      }
    }, 450);
 
}

javascript

Answer 1

Answer №1

A demonstration of tracking the progress of downloading a GIF file from a remote server can be achieved by utilizing either the XMLHttpRequest or Fetch API, instead of a traditional <img /> tag.

Using XMLHttpRequest

The XMLHttpRequest object offers an onprogress event that can be leveraged to monitor the download progress.

function downgif(url, imgElementId) {
    const xhr = new XMLHttpRequest();
    const imgElement = document.getElementById(imgElementId);

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onprogress = function(event) {
          const kbRemaining = ((event.total - event.loaded) / 1024).toFixed(2);
          console.log(`Remaining: ${kbRemaining} KB`);
    };

    xhr.onload = function() {
          const blobUrl = URL.createObjectURL(xhr.response);
          imgElement.src = blobUrl;
          console.log("Download complete.");
    };

    xhr.send();
}

const url = "https://example.com/your-gif.gif";
downgif(url, 'gifDisplay');

<img id="gifDisplay">

Using Fetch

The Fetch API enables downloading a resource as a stream and allows calculating progress based on the Content-Length header.

async function downgif(url, imgElementId) {
    const imgElement = document.getElementById(imgElementId);
    const response = await fetch(url);
    
    const contentLength = response.headers.get('Content-Length');
    
    const total = parseInt(contentLength, 10);
    let loaded = 0;

    const reader = response.body.getReader();
    const chunks = [];
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        chunks.push(value);
        loaded += value.length;

        const kbRemaining = ((total - loaded) / 1024).toFixed(2);

        console.log(`Remaining: ${kbRemaining} KB`);
    }


    const blob = new Blob(chunks);
    const blobUrl = URL.createObjectURL(blob);
    imgElement.src = blobUrl;

    console.log("Download complete.");
}

const url = "https://example.com/your-gif.gif";
downgif(url, 'gifDisplay');

<img id="gifDisplay">

To try this functionality with other large GIF files, you can explore various examples available on Wikipedia's category page for animated GIFs (the demo GIF in this example is sourced from there).

Answer 2

A demonstration of tracking the progress of downloading a GIF file from a remote server can be achieved by utilizing either the XMLHttpRequest or Fetch API, instead of a traditional <img /> tag.

Using XMLHttpRequest

The XMLHttpRequest object offers an onprogress event that can be leveraged to monitor the download progress.

function downgif(url, imgElementId) {
    const xhr = new XMLHttpRequest();
    const imgElement = document.getElementById(imgElementId);

    xhr.open('GET', url, true);
    xhr.responseType = 'blob';

    xhr.onprogress = function(event) {
          const kbRemaining = ((event.total - event.loaded) / 1024).toFixed(2);
          console.log(`Remaining: ${kbRemaining} KB`);
    };

    xhr.onload = function() {
          const blobUrl = URL.createObjectURL(xhr.response);
          imgElement.src = blobUrl;
          console.log("Download complete.");
    };

    xhr.send();
}

const url = "https://example.com/your-gif.gif";
downgif(url, 'gifDisplay');

<img id="gifDisplay">

Using Fetch

The Fetch API enables downloading a resource as a stream and allows calculating progress based on the Content-Length header.

async function downgif(url, imgElementId) {
    const imgElement = document.getElementById(imgElementId);
    const response = await fetch(url);
    
    const contentLength = response.headers.get('Content-Length');
    
    const total = parseInt(contentLength, 10);
    let loaded = 0;

    const reader = response.body.getReader();
    const chunks = [];
    while (true) {
        const { done, value } = await reader.read();
        if (done) break;

        chunks.push(value);
        loaded += value.length;

        const kbRemaining = ((total - loaded) / 1024).toFixed(2);

        console.log(`Remaining: ${kbRemaining} KB`);
    }


    const blob = new Blob(chunks);
    const blobUrl = URL.createObjectURL(blob);
    imgElement.src = blobUrl;

    console.log("Download complete.");
}

const url = "https://example.com/your-gif.gif";
downgif(url, 'gifDisplay');

<img id="gifDisplay">

To try this functionality with other large GIF files, you can explore various examples available on Wikipedia's category page for animated GIFs (the demo GIF in this example is sourced from there).

Display how many kilobytes are remaining to download

Answer №1

Using XMLHttpRequest

Using Fetch

Similar questions

Step-by-step guide to start an AngularJs application using TypeScript

Issue with Bootstrap Collapse functionality, functional in JSFiddle but not in actual application

Webpack loaders or plugins: understanding the distinction

Obtaining a webpage link from a div element with JQuery

Automatically bind model in Asp.Net MVC 4 by utilizing an array of objects in form submission

Transforming a jQuery trigger into vanilla JavaScript

What is the best way to find the product of each object in an array by the corresponding values in another array?

Tips for creating a stylish scrollbar in a React Material-Table interface

Efficiently compare arrays, eliminate identified keys in the second array

Using jQuery to retrieve the id with [id^=''] when making an AJAX request, then populating and generating a table based on the retrieved data

Samsung browser encounters an international error

Is there an issue with this code? HTML5 canvas

What sets array of middlewares apart from compose-middleware?

Updating multiple documents in Mongoose that have a specific element in an array

Unable to trigger onclick event for creating a new title

SecurityError: The dubious operation triggers CORS to persist in its insecurities

Catalog indexed in a JSON document

Activate or deactivate a button depending on the input value of a TextField in React.js

When clicking on the side-bar, it does not respond as expected

Is there a way for me to pinpoint the location of an error in React?