delayed loading of images possible in javascript?

Discussion in 'Javascript' started by stan k., Feb 4, 2004.

  1. stan k.

    stan k. Guest

    First of all let me clarify - I am not talking about having a bunch of
    images loaded all at once (or preloaded) and then controlling the
    display of the images after that point -- I know that can be done. I
    am talking about controlling the loading of those images themselves.

    I was told that the only way to do this was to dynamically write the
    html code via javascript and put time delays inbetween the dynamic
    creation of that html
    such as:

    -
    function DelayedWrite(){
    window.setTimeout('DelayedWrite()',3000);
    document.write("<img src="http://remoteurl/verybigimage1.jpg");
    window.setTimeout('DelayedWrite()',3000);
    document.write("<img src="http://remoteurl/verybigimage2.jpg");
    // etc . . .
    }

    onload = window.setTimeout('DelayedWrite()',3000);
    -

    What is occuring is that the initial time delay onload works but the
    delays
    within the function itself do not seem to do anything...

    Anyone have any ideas about how this can be done? perhaps a totally
    different approach even?

    The reason why I need to do this is I am pulling some pretty big
    images of weather maps from another site and presumably when I attempt
    to load several of the maps at once, the remote server thinks it's a
    Denial Of Service (dos) attack and ends up blocking the loading of any
    more images.
    stan k., Feb 4, 2004
    #1
    1. Advertising

  2. stan k.

    mesal Guest

    (stan k.) wrote in message news:<>...
    > First of all let me clarify - I am not talking about having a bunch of
    > images loaded all at once (or preloaded) and then controlling the
    > display of the images after that point -- I know that can be done. I
    > am talking about controlling the loading of those images themselves.
    >
    > I was told that the only way to do this was to dynamically write the
    > html code via javascript and put time delays inbetween the dynamic
    > creation of that html
    > such as:
    >
    > -
    > function DelayedWrite(){
    > window.setTimeout('DelayedWrite()',3000);
    > document.write("<img src="http://remoteurl/verybigimage1.jpg");
    > window.setTimeout('DelayedWrite()',3000);
    > document.write("<img src="http://remoteurl/verybigimage2.jpg");
    > // etc . . .
    > }
    >
    > onload = window.setTimeout('DelayedWrite()',3000);
    > -
    >
    > What is occuring is that the initial time delay onload works but the
    > delays
    > within the function itself do not seem to do anything...
    >
    > Anyone have any ideas about how this can be done? perhaps a totally
    > different approach even?
    >
    > The reason why I need to do this is I am pulling some pretty big
    > images of weather maps from another site and presumably when I attempt
    > to load several of the maps at once, the remote server thinks it's a
    > Denial Of Service (dos) attack and ends up blocking the loading of any
    > more images.


    Hi,

    try this code:

    var pics = new Array('verybigimage1.jpg','verybigimage2.jpg',...);
    var picNum = 0;
    function DelayedWrite(picNum)
    {
    document.write("<img src='http://remoteurl/verybigimage" + picNum + ".jpg'");
    picNum++;
    if (picNum == maxPictures)
    window.clearInterval(intName);
    }

    intName = window.setInterval('DelayedWrite()',3000);

    didn't try it but I think it should work..
    good luck

    mesal
    mesal, Feb 4, 2004
    #2
    1. Advertising

  3. stan k.

    Guest

    (stan k.) wrote in message news:<>...
    > -
    > function DelayedWrite(){
    > window.setTimeout('DelayedWrite()',3000);
    > document.write("<img src="http://remoteurl/verybigimage1.jpg");
    > window.setTimeout('DelayedWrite()',3000);
    > document.write("<img src="http://remoteurl/verybigimage2.jpg");
    > // etc . . .
    > }
    >
    > onload = window.setTimeout('DelayedWrite()',3000);
    > -
    >
    > What is occuring is that the initial time delay onload works but the
    > delays
    > within the function itself do not seem to do anything...
    >

    Hi

    The function DelayedWrite() executes 3s after the web page loads.

    [POINT X]
    Once inside the function, all of the of the image tags are written
    with no perceptable delay.
    Each of several timeouts call the function 3s later [GO BACK TO POINT
    X IN INFINITE LOOP].

    It looks like an infinite loop with lots of image tags being written
    every 3 seconds. Maybe this infinite loop clogs up your browser which
    may look like a Denial of Service attack.

    Assuming it doesn't work just putting all the images in with plain
    HTML and the server really does think this is Denial of Service...

    How about having an image of the words "Please Wait" called
    pleaseWait.gif

    In the body for each image you add
    <img name="weather" src="pleaseWait.gif">,

    how about using <body onload="delayLoad();"> to call the function:

    function delayLoad() {
    var len = document.weather.length;
    // multiple objects named "weather" put in DOM as array with length
    var imageURL="";
    for (var i=0; i<len; i++) {
    instr="document.weather["+i+"].src='http://remoteurl/verybigimage"+i+".jpg';";
    window.setTimeout(instr,(i+1)*3000);
    }
    }

    the function assembles strings (instructions) like:
    document.weather[0].src='http://remoteurl/verybigimage0.jpg';
    document.weather[1].src='http://remoteurl/verybigimage1.jpg';
    document.weather[2].src='http://remoteurl/verybigimage2.jpg';
    document.weather[3].src='http://remoteurl/verybigimage3.jpg';
    etc

    and sets up timeouts to execute the instructions one by one
    3,6,9,12... seconds after the page loads.

    I've not tested the above code, but I think it would replace the
    "Please Wait" images in sequence with 3s delay between images.

    Hope that's of some use.

    Mark
    , Feb 4, 2004
    #3
  4. stan k.

    @SM Guest

    "stan k." a ecrit :
    >
    > First of all let me clarify - I am not talking about having a bunch of
    > images loaded all at once (or preloaded) and then controlling the
    > display of the images after that point -- I know that can be done. I
    > am talking about controlling the loading of those images themselves.
    >
    > I was told that the only way to do this was to dynamically write the
    > html code via javascript and put time delays inbetween the dynamic
    > creation of that html
    > such as:


    setTimeout('1st_JS_function()',2000);
    setTimeout('2nd_JS_function()',4000);
    setTimeout('3dr_JS_function()',6000);
    setTimeout('4th_JS_function()',8000);
    (2 secondes is not enough for me to donwload an heavy image)

    as all setTimeouts are launch together (it is what you do in DelayedWrite)
    you need to increase the delay of each next called

    Take care your DelayedWrite would loop !
    Is there something to stop it ?

    > -
    > function DelayedWrite(){
    > window.setTimeout('DelayedWrite()',3000);
    > document.write("<img src="http://remoteurl/verybigimage1.jpg");
    > window.setTimeout('DelayedWrite()',3000);
    > document.write("<img src="http://remoteurl/verybigimage2.jpg");
    > // etc . . .
    > }
    >
    > onload = window.setTimeout('DelayedWrite()',3000);
    > -
    >
    > What is occuring is that the initial time delay onload works but the
    > delays
    > within the function itself do not seem to do anything...


    (3000 = 3000 = 3000 = 3000 is not 3000+3000+3000+3000)
    and redo 3 secondes after and again and again
    When does the browser has a little time to draw the page ?


    --
    ******** (enlever/remove [OTER_MOI] du/from reply url) *******
    Stéphane MORIAUX : mailto:
    Aide aux Pages Perso (images & couleurs, formulaire, CHP, JS)
    http://perso.wanadoo.fr/stephane.moriaux/internet/
    **************************************************************
    @SM, Feb 5, 2004
    #4
    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. Object Delayed loading dynamically into Placeholder

    , Oct 5, 2006, in forum: ASP .Net Building Controls
    Replies:
    0
    Views:
    116
  2. matt
    Replies:
    1
    Views:
    383
  3. matt
    Replies:
    8
    Views:
    214
    Mauricio Fernández
    Jun 19, 2004
  4. Delayed SCRIPT Loading

    , Feb 11, 2005, in forum: Javascript
    Replies:
    1
    Views:
    67
  5. jay K.
    Replies:
    1
    Views:
    1,074
    Stanimir Stamenkov
    Jul 29, 2011
Loading...

Share This Page