Image loading using javascript. Handling timeouts and parrallel loading under IE

[zborisau]

Hey good people,

I've been given a problem to solve recently - and stuck with the
solution for a good 4 days already.

i have a link which leads to popup window. the purpose of that popup
window is to redirect user to the one of available servers.

so i need to check which server is available. i have decided to
download some 1pixel image from every server and if it was downloaded
then the server is available. the other thing i have to keep in mind is
that 3 servers have some order of preference, ie server1 is prefered to
have user redirected to then server2 and then server3.

the way i do it similar to the one below:

#########################################################
<img id="scheck0" style="display:none;">
<img id="scheck1" style="display:none;">
<img id="scheck2" style="display:none;">

<div id="progress">Connecting to server...</div>

<script>
function showError(link)
{
document.getElementById("progress").innerHTML=link;
}

function redirect(link)
{
window.location=link;
}

var serverCheckTimeoutMillis =10000 //10 seconds

var isServer0=false;
var isServer1=false;
var isServer2=false;

var image0 = document.getElementById("scheck0");
image0.src = "www.server0.com/image1px.gif";
image0.onload = function() {
isServer0=true;
};
image0.onabort = function() {
showError("failed to connect");
};

var image1 = document.getElementById("scheck1");
image1.src = "www.server1.com/image1px.gif";
image1.onload = function() {
isServer1=true;
};
image1.onabort = function() {
showError("failed to connect");
};

var image2 = document.getElementById("scheck2");
image2.src = "www.server2.com/image1px.gif";
image2.onload = function() {
isServer2=true;
};
image2.onabort = function() {
showError("failed to connect");
};

var dNow = new Date();
var startTimeMillis = dNow.getTime();

var intervalID = window.setInterval("checkServers()",500);

function checkServers()
{
var isTimeoutHappened = false;
var currentTimeMillis = -1;

dNow = new Date();
currentTimeMillis = dNow.getTime();

if ((currentTimeMillis - startTimeMillis) >=
serverCheckTimeoutMillis)
isTimeoutHappened = true;

if (isServer0 == true)
{
redirect("www.server0.com/form.html");
window.clearInterval(intervalID);
}
else if (isServer0 == false && isServer1 == true &&
isTimeoutHappened)
{
redirect("www.server1.com/form.html);
window.clearInterval(intervalID);
}
else if (isServer1 == false && isServer2 == true &&
isTimeoutHappened)
{
redirect("www.server2.com/form.html");
window.clearInterval(intervalID);
}
else if (isServer0 == false && isServer1 == false && isServer2 ==
false && isTimeoutHappened)
{
window.clearInterval(intervalID);
showError("failed to connect");
}

}
</script>
#########################################################

the code is quite simple:
1. load three images simultaneously
2. onload handler of every image will change isServer0(or1 or2) to true
once image from particular server is loaded.
3. every half a minute checkServer() function is called (it was set
using window.setInterval("checkServers()",500); interval ) and checks
which server is available and redirects user to the correct server.
4. checkServer() always checks for the isTimeoutHappened boolean var -
which is set to true if serverCheckTimeoutMillis milliseconds has
passed from the start of script execution.

the reason for timeout is simple.
by default browser waits somewhere around 30 seconds before it decides
to stop some image download should this image location be unavailable.
the isTimeoutHappened will be set to true after 10 seconds of script
execution - and on this occasion i decide that server is not available.
I just do not wait for those 30 seconds

AND NOW PROBLEM:

firefox works beautiful with this code.

internet explorer (i am using ver 6) does not work under one case:

server0 - is offline
server1 - is offline
server2 - is online

IE tries to download all three images and whilst first two cannot be
downloaded, it downloads third one no problem, but the onload event for
the 3rd image is never fired unless the first two images has
timeout-ed.

So under IE isTimeoutHappened happends before server2 image onload
event has fired.

I checked this suggestion through this code:
<img src="www.server0.com/image1px.gif">
<img src="www.server1.com/image1px.gif">
<img src="www.server2.com/image1px.gif">

and stupid IE will not show third image (even though it has downloaded
it already) unless the download for the first two has timed out.

When I checked this stuff in firefox - i noticed that firefox displays
images as it downloads them - thus onload events get fired timedly.

To correct this problem i believe that I have to cancel image loading
after some timeout time (in my cae it is 10 seconds).

So far I have not got any ideas how to do that.

I tried to fire my own abort events to those images - no chance.
Browser does not gicve a damn about it.


If you have any solution for such a problem, or may be u have another
solution on how to pick up the first available server (in some order of
priority) and redirect user to that server (using javascript strictly)
- I will gladly appreciate all comments.



Best regards,


Boris

 

[Mcginkel]

just a thought :
Could it be that you only have 2 concurrent connections in your browser
to load something ? The 3rd image would not start until the first ones
are finished/timedout.

Can you check on the server if you see the 3rd request comming at the
same time as the first 2 ?

Kees

 

[ASM]

(e-mail address removed) wrote:

[snip]

var image1 = document.getElementById("scheck1");
image1.src = "www.server1.com/image1px.gif";
image1.onload = function() {
isServer1=true;
};

I've seen other order way to code :

var image1 = document.getElementById("scheck1");
image1.onload = function() {
isServer1=true;
};
image1.onabort = function() {
showError("failed to connect");
};
image1.src = "www.server1.com/image1px.gif";

[snip]

AND NOW PROBLEM:

firefox works beautiful with this code.

internet explorer (i am using ver 6) does not work under one case:

server0 - is offline
server1 - is offline
server2 - is online

IE tries to download all three images and whilst first two cannot be
downloaded, it downloads third one no problem, but the onload event for
the 3rd image is never fired unless the first two images has
timeout-ed.

if to set the onload and onabort(IE only) functions
before calling images (src) doesn't solve your problem
do what you expect :

To correct this problem i believe that I have to cancel image loading
after some timeout time (in my cae it is 10 seconds).

So far I have not got any ideas how to do that.

image1.src = ''; ? ?

If you have any solution for such a problem, or may be u have another
solution on how to pick up the first available server (in some order of
priority) and redirect user to that server (using javascript strictly)
- I will gladly appreciate all comments.

No idea if that could work :

// ***************

serverSpeed = '';
imagesLoader = new Array();
I = new Array();
Ii=0;
ind = new Object();
function imageLoaded(nameServer) {
ind[nameServer]=0;
I[Ii] = new Image();
I[Ii].src = 'www.'+nameServer+'/image1px.gif';
imageLoading(nameServer,I[Ii]);
Ii++;
}
function imageLoading(nameServer,imag) {
if(!imag.complete && ind[nameServer]<50)
imagesLoader[name] = setTimeout('imageLoaded('+
nameServer+','+imag+')',200);
else
if(!imag.complete) {
clearTimeout(imagesLoader[nameServer]);
alert('image from '+nameServer+' abort');
return;
}
else
serverSpeed += severName+'='+ind[nameServer]+',';
ind[nameServer]++ ;
}

imageLoaded('server0');
imageLoaded('server1');
imageLoaded('server2');

setTimeout( function() {
if(serverSpeed=='') {
alert('all servers kaput');
return;
}
serverSpeed = serverSpeed.split(',');
for(var i=0, L=serverSpeed.length;i<L;i++)
serverSpeed=serverSpeed.split('=');
serverSpeed.sort( function by_name(a,b) {
if (a[1] < b[1] ) { return -1; }
if (a[1] > b[1] ) { return 1; }
return 0;
}
);
fasterServer = serverSpeed[0][0];
alert('winner = '+
serverSpeed[0][0]+
'\ntime : '+serverSpeed[0][1]+' 1/5s');
location.href = 'http://www.'+fasterServer+'/';
}
, 10500);

//*******

 

[zborisau]

thanks body - ill chack this code once I get in office and let you
know.

img.src=''; does not work by the way.


and yes - I have actually seen that already. I have to set onload,
onerror and onabort event handlers before setting image source.

cheers guys

 

[zborisau]

thanks buddy - ill chack this code once I get in office and let you
know.

img.src=''; does not work by the way.


and yes - I have actually seen that already. I have to set onload,
onerror and onabort event handlers before setting image source.

cheers guys