Download speed test

[ahmetsan]

Hi I am trying to measure download speed from server with ajax call and xmlwebrequest, I download a 1 mb file and check the total time. However it shows just response time from server and doesn't wait until all file loaded for 2 methods I showed below. What am I doing wrong? Any other ways are welcome. Thanks...

First method I am tring is

var start = new Date();
$.ajax ({
url: 'https://www.example.com/perftest/dummyFile1024',
cache: false,  
success : function()
{
 var total=(new Date() - start)
 alert(total)    
},
 error : function(jqxhr, status, ex) {
})

Second method is

var start = new Date();
 (function rec() { var start = new Date().getTime();
 var xmlHttp = new XMLHttpRequest();
 xmlHttp.open('GET', "https://www.example.com/perftest/dummyFile1024",true);   
 xmlHttp.setRequestHeader("Cache-Control", "no-cache");
 xmlHttp.onreadystatechange = function () {
 if (xmlHttp.readyState == 4) {
   var total=(new Date() - start)            
  alert(total)          
};
 }; xmlHttp.send(null);
})();

[Anas Mosaad]

You may try using an image. An image has a property onload that should help you on this. For example:

var img = document.getElementById('myimg');
 
    img.onload = function () {
        alert ("The image has been loaded!");        
    };
 

Please let us know the results you got, hope it can help.

[ahmetsan]

I want to measure download speed not for one server. There will be 3 regions that client can measure download speed from these 3 servers located in these regions. How can I use this image onload property for different servers?

[Anas Mosaad]

I was trying to answer the question about knowing how much does it take to load the object. If your object is a files, the above method is perfect for you. If you have another method, I don;t know this can be implemented.

[ahmetsan]

Sorry I am not good for web development and my question with your method how can I load pictures from different servers. for example your code loads 'myimg' which is located at same place with the webpage.

var img = document.getElementById('myimg');

I use at my methods different URL's to call the files in different servers. Could you give advice how to do that with images. Thanks for your answer...

[Anas Mosaad]

For example you'll create a div with id container to hold the images. From JavaScript you can add images ass follows:

<script type="text/javascript">
function xLoad() {
    alert('Image was loaded ...');
}
 
document.getElementById('container').innerHTML = '<img src="http://solutions.devx.com/imagesvr_ce/1779/topad.png" onload="xLoad()" />'
</script>
 

You may style the container div to be hidden if you don't want it to be visible for the user.

[ahmetsan]

That is perfect. I will give a try and let you know about result. Thank you very much...

[Anas Mosaad]

I appreciate if you can share with us the solution you adopted.

[ahmetsan]

Hi Anas, I tried your solution to measure bandwidth test, It works perfect. Thank you.
Moreover I found something with my code I mentioned above, at the ajax call when I set async:false, anymore it waits to download whole file what was my problem, so I am able to measure download speed with this method as well. However internet explorer and firefox is still the same. chrome, safari works well now. Do you have any idea why it is happening?
Thanks again...

Edit: I have asked this at another question. http://bytes.com/topic/javascript/an...se#post3739059