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

Discussion in 'Javascript' started by zborisau@gmail.com, Aug 26, 2005.

  1. Guest

    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, 2005
    #1
    1. Advertising

  2. Mcginkel Guest

    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
    Mcginkel, Aug 26, 2005
    #2
    1. Advertising

  3. ASM Guest

    Re: Image loading using javascript. Handling timeouts and parrallelloading under IE

    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);

    //*******

    --
    Stephane Moriaux et son [moins] vieux Mac
    ASM, Aug 26, 2005
    #3
  4. Guest

    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, 2005
    #4
  5. Guest

    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, 2005
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?SmFzb24=?=

    forms authentication timeouts and session timeouts

    =?Utf-8?B?SmFzb24=?=, Jun 22, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    437
    =?Utf-8?B?SmFzb24=?=
    Jun 22, 2004
  2. The Man With The Harmonica

    use of serial and parrallel port using C

    The Man With The Harmonica, Aug 18, 2004, in forum: C Programming
    Replies:
    21
    Views:
    1,158
    Flash Gordon
    Aug 23, 2004
  3. Replies:
    1
    Views:
    317
    Chris Davies
    Aug 9, 2006
  4. Norm
    Replies:
    7
    Views:
    436
  5. edfialk
    Replies:
    0
    Views:
    176
    edfialk
    May 10, 2007
Loading...

Share This Page