XMLHttpRequest JS Image loading

Question

I want to create a website which loads a image via XMLHttpRequest(). (XMLHttpRequest because I want to represent the user a % progressbar)

My Code:

var req = new XMLHttpRequest();  

req.addEventListener("progress", onUpdateProgress, false);  
req.addEventListener("load", onTransferComplete, false);  
req.addEventListener("error", onTransferFailed, false);  
req.addEventListener("abort", onTransferFailed, false);  

req.open("GET", "image.png", true);  
req.send();  

function onUpdateProgress(e) {  
 if (e.lengthComputable) {  
 var percent_complete = e.loaded/e.total;  
 if (Math.round(percent_complete*200)>=20) {  
                    $("#progress").animate({  
                    width: Math.round(percent_complete*100)  
            }, 0);  
        }  
      }  
}  

function onTransferFailed(e) {  
    alert("Something went wrong. Please try again.");  
}  

function onTransferComplete(e) {  
   //Problem  
}

My problem is I don´t know how to show the image which is now loaded. I hope anyone can help me :) Thanks ...

+1 good question! I'm getting binary image and don't know how show the image — Topera
– Topera, Commented Sep 24, 2010 at 20:12

Marcel Korpel · Accepted Answer · 2010-09-24 19:58:18Z

3

You can do this using DATA URIs, but it's hard to make that work in all current browsers.

If caching options are set correctly, you can better load it twice: first using your AJAX request, then, after the image has been cached by the browser, another time using the usual image functions. The second time your image will not be retrieved from the server again, but the browser will use the cached file and show the image almost instantly.

answered Sep 24, 2010 at 19:58

Marcel Korpel

21.8k6 gold badges63 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tobias Reich Over a year ago

This seems to work. But it´s hard to see if the browser really loud the picture only one time. The Safari WebInspector for example shows it two times: electerious.com/share/Web%20Inspector.png

Marcel Korpel Over a year ago

@tobias – Are your server settings correct? Can you show the headers with which the picture is sent?

Tobias Reich Over a year ago

I think so. Here´s the test site: electerious.com/share/loading.html

Marcel Korpel Over a year ago

@tobias – Hey, I'm looking for laminate flooring; where did you get that? ;)

Marcel Korpel Over a year ago

@tobias – There's another major flaw with your example: you should preload your image using an XMLHttpRequest and only after it's fully loaded you can assign the image to your img element. Now you're assigning the src in your HTML as well and the asynchronous XMLHttpRequest will download the image in parallel with the browser trying to render the image.

|

Collectives™ on Stack Overflow

XMLHttpRequest JS Image loading

1 Answer 1

8 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related