473,226 Members | 1,535 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,226 software developers and data experts.

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

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

Aug 26 '05 #1
4 43983
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

Aug 26 '05 #2
ASM
zb******@gmail.com 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[i]=serverSpeed[i].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);

//*******

--
Stephane Moriaux et son [moins] vieux Mac
Aug 26 '05 #3
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

Aug 28 '05 #4
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

Aug 28 '05 #5

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
by: Roy Wang | last post by:
hi, My problem is how to determining when the XML file has loaded using javascript. I loaded an xml file using javascript in a web page. The code below is loading the xml file for IE:...
4
by: Doug van Vianen | last post by:
Hi, I have the following coding on a web page. It causes two pictures (pic1.jpg and pic2.jpg) to show, one above the other and then when one clicks on the top picture is squeezes to the left...
3
by: jblossom | last post by:
Hello, I'm in a quandary as to how to address a problem. The site in question: http://agapeyoga.com On the left-hand side of the site are image navigation elements that change when clicked...
6
by: sagarlotiya | last post by:
Hi I have made one javascript which allows me to add note on image using css and javascript. Every thing works fine. But following problme occurs. I want to display allthe notes on image when we...
2
by: ashish tomar | last post by:
i want to devide a page like this --- ___________________________________________________________ ____________________________________________________________ | weww |...
1
marshal
by: marshal | last post by:
Hi, I want to save web page as an image by using javascript (or may be in java). i.e. I want to save the image which is generated by the 'Print Screen button' of keyboard for web page. How...
5
by: sindhu | last post by:
Hello, I want to use Images as menu and menu items using javascript.The aim is that i have images with the menu items. when i click the image on that perticular mmenu item i want an image to be...
3
by: sejal17 | last post by:
Hello I have got image path in javascript from php code. That is:http://localhost/fotolia/photos/9.jpg I want to take only photos/9.jpg from that full path.How can i do that?Please...
8
donilourdu
by: donilourdu | last post by:
hi, I want to preload the image on page load using javascript by, Doni
1
isladogs
by: isladogs | last post by:
The next online meeting of the Access Europe User Group will be on Wednesday 6 Dec 2023 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, Mike...
0
by: VivesProcSPL | last post by:
Obviously, one of the original purposes of SQL is to make data query processing easy. The language uses many English-like terms and syntax in an effort to make it easy to learn, particularly for...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.