JavaScript loading progress of an image

by

With this, you add 2 new functions on the Image() object: 

 Image.prototype.load = function(url){
        var thisImg = this;
        var xmlHTTP = new XMLHttpRequest();
        xmlHTTP.open('GET', url,true);
        xmlHTTP.responseType="arraybuffer";
        xmlHTTP.onload = function(e) {
            var blob = new Blob([this.response]);
            thisImg.src = window.URL.createObjectURL(blob);
        };
        xmlHTTP.onprogress = function(e) {
            thisImg.completedPercentage = parseInt((e.loaded / e.total) * 100);
        };
        xmlHTTP.onloadstart = function() {
            thisImg.completedPercentage = 0;
        };
        xmlHTTP.send();
    };

    Image.prototype.completedPercentage = 0;

And here you use the load function and append the image on a div.

var img = new Image();
img.load("url");
document.getElementById("myDiv").appendChild(img);

During the loading state you can check the progress percentage using img.completedPercentage.

More Related Contents:

  1. How can I modify with css an image appended with javascript?
  2. how to proportionally scale a div with images inside?
  3. Programmatically change the src of an img tag
  4. Render HTML to an image
  5. Resize image with javascript canvas (smoothly)
  6. Browser/HTML Force download of image from src=”data:image/jpeg;base64…”
  7. How to load all the images from one of my folder into my web page, using Jquery/Javascript
  8. how to show alternate image if source image is not found? (onerror working in IE but not in mozilla) [duplicate]
  9. execute function after complete page load [duplicate]
  10. How to silently hide “Image not found” icon when src source image is not found
  11. Dynamically resizing Image-maps and images
  12. How to save a base64 image to user’s disk using JavaScript?
  13. How to display image with JavaScript?
  14. Detecting WebP support
  15. Can I get image from canvas element and use it in img src tag?
  16. Disable dragging an image from an HTML page
  17. How do image preloaders work?
  18. Adding images to an HTML document with JavaScript
  19. Load image from url and draw to HTML5 Canvas
  20. Make image fill div completely without stretching
  21. img onload doesn’t work well in IE7
  22. Is there a way to load images to user’s cache asynchronously?
  23. JavaScript: Get image dimensions
  24. Sort by image resolution in gallery
  25. Is it necessary to set onload function before setting src for an image object?
  26. How much data / information can we save / store in a QR code?
  27. How to bind img src to data in Vue
  28. Center an Image vertically and horizontally using CSS
  29. canvas- Cropping images in different shapes
  30. Using base64-encoded images with HtmlService in Apps Script

Leave a Comment