loading images one by one

Discussion in 'Javascript' started by windandwaves, Aug 21, 2005.

  1. windandwaves

    windandwaves Guest

    Hi

    I have the following html:

    <div id="menu">
    <div id="m1"><a href="m1.php"><img src="m1.gif" alt="m1"></a></div>
    <div id="m2"><a href="m2.php"><img src="m2.gif" alt="m2"></a></div>
    <div id="m3"><a href="m3.php"><img src="m3.gif" alt="m3"></a></div>
    <div id="m4"><a href="m4.php"><img src="m4.gif" alt="m4"></a></div>
    <div id="m5"><a href="m5.php"><img src="m5.gif" alt="m5"></a></div>
    </div>

    and I want to load on the images (1-5), one at the time, loading one every
    0.5 seconds.

    I have some thought on how to do this, but i wanted to find the smartest way

    function onload() {
    for (i=1; i< 6; i++) {
    el = getelementbyid('m'.i);
    el = el.style.display = "none";
    }
    for (i=1; i< 6; i++) {
    waiter(0.5)
    el = getelementbyid('m'.i);
    el = el.style.display = "none";
    }


    function waiter($seconds) {
    ....???
    }

    any hints?
     
    windandwaves, Aug 21, 2005
    #1
    1. Advertising

  2. windandwaves

    Lee Guest

    windandwaves said:
    >
    >Hi
    >
    >I have the following html:
    >
    ><div id="menu">
    > <div id="m1"><a href="m1.php"><img src="m1.gif" alt="m1"></a></div>
    > <div id="m2"><a href="m2.php"><img src="m2.gif" alt="m2"></a></div>
    > <div id="m3"><a href="m3.php"><img src="m3.gif" alt="m3"></a></div>
    > <div id="m4"><a href="m4.php"><img src="m4.gif" alt="m4"></a></div>
    > <div id="m5"><a href="m5.php"><img src="m5.gif" alt="m5"></a></div>
    ></div>
    >
    >and I want to load on the images (1-5), one at the time, loading one every
    >0.5 seconds.
    >
    >I have some thought on how to do this, but i wanted to find the smartest way
    >
    >function onload() {
    > for (i=1; i< 6; i++) {
    > el = getelementbyid('m'.i);
    > el = el.style.display = "none";
    > }
    > for (i=1; i< 6; i++) {
    > waiter(0.5)
    > el = getelementbyid('m'.i);
    > el = el.style.display = "none";
    >}
    >
    >
    >function waiter($seconds) {
    > ....???
    >}
    >
    >any hints?


    Event-driven systems like web pages generally don't have any sort
    of wait or sleep function, because you want it to always be able
    to respond to mouse clicks, etc. Instead, you schedule some action
    to occur after a specified delay:

    <html>
    <head>
    <script type="text/javascript">
    function reveal(n) {
    if(document.getElementById("m"+n)) {
    document.getElementById("m"+n).style.display="block";
    setTimeout("reveal("+(n+1)+")",500);
    }
    }
    </script>
    <style type="text/css">
    #m1 {display:none}
    #m2 {display:none}
    #m3 {display:none}
    #m4 {display:none}
    </style>
    </head>
    <body onload="reveal(1)">
    <div id="m1"><img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"></div>
    <div id="m2"><img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"></div>
    <div id="m3"><img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"></div>
    <div id="m4"><img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"></div>
    </body>
    </html>
     
    Lee, Aug 21, 2005
    #2
    1. Advertising

  3. windandwaves

    ASM Guest

    Lee wrote:
    > Event-driven systems like web pages generally don't have any sort
    > of wait or sleep function, because you want it to always be able
    > to respond to mouse clicks, etc. Instead, you schedule some action
    > to occur after a specified delay:
    >
    > <html>
    > <head>
    > <script type="text/javascript">
    > function reveal(n) {
    > if(document.getElementById("m"+n)) {
    > document.getElementById("m"+n).style.display="block";
    > setTimeout("reveal("+(n+1)+")",500);


    on loaded page :
    - anything can prove all images are loaded (nor complete)
    - in half a second I doubt image got enough time to be complete

    > }
    > }
    > </script>
    > <style type="text/css">
    > #m1 {display:none}
    > #m2 {display:none}
    > #m3 {display:none}
    > #m4 {display:none}
    > </style>
    > </head>
    > <body onload="reveal(1)">


    on loaded page :
    - anything can prove first image is loaded (nor complete)

    > <div id="m1"><img src="http://www.azphx.com/dhtml/tmp/alpha6464.jpg"></div>
    > <div id="m2"><img src="http://www.azphx.com/dhtml/tmp/beta6464.jpg"></div>
    > <div id="m3"><img src="http://www.azphx.com/dhtml/tmp/gamma6464.jpg"></div>
    > <div id="m4"><img src="http://www.azphx.com/dhtml/tmp/delta6464.jpg"></div>
    > </body>
    > </html>
    >



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

    Lee Guest

    ASM said:

    >on loaded page :
    >- anything can prove all images are loaded (nor complete)
    >- in half a second I doubt image got enough time to be complete


    >on loaded page :
    >- anything can prove first image is loaded (nor complete)



    I don't understand your comments at all. Try rephrasing
    "amything can prove" using different words.

    The images are not loading across the internet when reveal()
    is called, they are simply being made visible.
     
    Lee, Aug 21, 2005
    #4
  5. windandwaves

    ASM Guest

    Lee wrote:
    > ASM said:
    >
    >
    >>on loaded page :
    >>- anything can prove all images are loaded (nor complete)
    >>- in half a second I doubt image got enough time to be complete

    >
    >>on loaded page :
    >>- anything can prove first image is loaded (nor complete)

    >
    > I don't understand your comments at all. Try rephrasing
    > "amything can prove" using different words.


    As you like :
    "rien ne prouve que les images sont finies d'être chargées
    dès la fin du chargement de la page."

    Anything can explicitly confirm that each image of the page
    is completly loaded
    when the page has finished to load

    so, only 1/2 second seems very short to fire on the 1st image
    except if you have something waiting all images are complete
    before to launch the loop

    > The images are not loading across the internet when reveal()


    Of coursethey are loaded across the internet ! on one time ...
    and anything tells (confirm) you that was done

    To load a page != to load its images (or any else external object)

    > is called, they are simply being made visible.


    I've seen they are made visible,
    but is there something to be shown ? that is the question.


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 21, 2005
    #5
  6. ASM <> wrote:

    > "rien ne prouve que les images sont finies d'être chargées
    > dès la fin du chargement de la page."


    That is not true. To paraphrase Flanagan:

    The onload handler is executed when the document or frameset is
    fully loaded, which means that all images have been downloaded and
    displayed, all subframes have loaded, any Java applets have started
    running, and so on.


    Bye,
    Martin
     
    Martin Bialasinski, Aug 22, 2005
    #6
  7. windandwaves

    Lee Guest

    ASM said:
    >
    >Lee wrote:
    >> ASM said:
    >>
    >>
    >>>on loaded page :
    >>>- anything can prove all images are loaded (nor complete)
    >>>- in half a second I doubt image got enough time to be complete

    >>
    >>>on loaded page :
    >>>- anything can prove first image is loaded (nor complete)

    >>
    >> I don't understand your comments at all. Try rephrasing
    >> "amything can prove" using different words.

    >
    >As you like :
    >"rien ne prouve que les images sont finies d'être chargées
    > dès la fin du chargement de la page."
    >
    >Anything can explicitly confirm that each image of the page
    >is completly loaded
    >when the page has finished to load


    You seem to be making one of these mistakes:
    1. Confusing "anything" with "nothing"
    or:
    2. Failing to make it clear that you are asking the question "Is there
    anything that can explicitly confirm that ... ?"

    If that's an issue, the images can be pre-loaded.
     
    Lee, Aug 22, 2005
    #7
  8. windandwaves

    windandwaves Guest

    Lee wrote:
    > ASM said:
    >>
    >> Lee wrote:
    >>> ASM said:
    >>>
    >>>
    >>>> on loaded page :
    >>>> - anything can prove all images are loaded (nor complete)
    >>>> - in half a second I doubt image got enough time to be complete
    >>>
    >>>> on loaded page :
    >>>> - anything can prove first image is loaded (nor complete)
    >>>
    >>> I don't understand your comments at all. Try rephrasing
    >>> "amything can prove" using different words.

    >>
    >> As you like :
    >> "rien ne prouve que les images sont finies d'être chargées
    >> dès la fin du chargement de la page."
    >>
    >> Anything can explicitly confirm that each image of the page
    >> is completly loaded
    >> when the page has finished to load

    >
    > You seem to be making one of these mistakes:
    > 1. Confusing "anything" with "nothing"
    > or:
    > 2. Failing to make it clear that you are asking the question "Is there
    > anything that can explicitly confirm that ... ?"
    >
    > If that's an issue, the images can be pre-loaded.



    Thank you Herc, Lee, martin and Stephane for your comments. Much
    appreciated.

    "rien ne prouve que" translates into English as "Nothing proves that ;-) I
    think anyway...

    What in some languages is nothing is anything in other languages and vice
    versa (e.g. I dont understand no nothing)

    Thanks again. For a test version, see:

    http://www.sunnysideup.co.nz/clients/e61/index.php



    - Nicolaas
     
    windandwaves, Aug 22, 2005
    #8
  9. windandwaves

    ASM Guest

    Martin Bialasinski wrote:
    > ASM <> wrote:
    >
    >
    >>"rien ne prouve que les images sont finies d'être chargées
    >> dès la fin du chargement de la page."

    >
    > That is not true. To paraphrase Flanagan:
    >
    > The onload handler is executed when the document or frameset is
    > fully loaded, which means that all images have been downloaded and
    > displayed, all subframes have loaded, any Java applets have started
    > running, and so on.


    It is not what I did experiment ...
    I think the onload handler starts as soon as, reading file, </html> is
    reached (supose in frameset, '</html>' of the last frame's page).
    Do a test with a page containing a lot of images (and beter if they are
    heavy), i.e. with IE, and preferentialy in RTC (not in DSL)
    -> the page is displayed, then images continue to load

    With example given by somewhere else
    - DSL (ADSL) with the 4 few small images : this doesn't appear
    - Add an inexisting image : loop runs while all images aren't present
    - Add more heavy images : page is displayed without images,
    then ... you seems to be right,
    even if I do not understand how and why,
    reveal() doesn't start before last image is loaded
    even though the alarm I'd put in body's onload fired
    as soon as page was displayed/loaded.

    By other way,
    could you tell me why an onload on images is made for ?

    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 22, 2005
    #9
  10. windandwaves

    ASM Guest

    Lee wrote:
    > ASM said:
    >
    >>Anything can explicitly confirm that each image of the page
    >>is completly loaded
    >>when the page has finished to load

    >
    >
    > You seem to be making one of these mistakes:
    > 1. Confusing "anything" with "nothing"


    sorry, English is not my mother's language,
    I think I wanted to say 'nothing'

    anyway, I learned something I didn't expect about loading images in a
    web page (that I yet have to verify with NC4) :
    the body's onload wait last image is loaded to run 'reveal()'
    while it fires an alert as soon as this same page is displayed
    (I can put my test page on line to see what I want to say)

    > or:


    see my other post just upthere for some light about what I could want to
    say (hope it's clearer)

    > 2. Failing to make it clear that you are asking the question "Is there
    > anything that can explicitly confirm that ... ?"
    >
    > If that's an issue, the images can be pre-loaded.


    It seems they have not to be pre-loaded in given example
    and ...
    I do not understand : why ?


    --
    Stephane Moriaux et son [moins] vieux Mac
     
    ASM, Aug 22, 2005
    #10
  11. ASM <> wrote:

    > Martin Bialasinski wrote:
    >> ASM <> wrote:
    >>
    >>>"rien ne prouve que les images sont finies d'être chargées
    >>> dès la fin du chargement de la page."

    >> That is not true. To paraphrase Flanagan:
    >> The onload handler is executed when the document or frameset is
    >> fully loaded, which means that all images have been downloaded and
    >> displayed, all subframes have loaded, any Java applets have started
    >> running, and so on.

    >
    > It is not what I did experiment ...
    > I think the onload handler starts as soon as, reading file, </html> is
    > reached (supose in frameset, '</html>' of the last frame's page).


    Please take a look at http://test.reasonmaker.com/onload/
    The image is returned by a php script, which has sleep(10) as the
    first line.

    Onload will not fire until the 10 seconds have passed for Opera 8 and
    Firefox 1.06. Do you have a browser that does not do this?

    > By other way,
    > could you tell me why an onload on images is made for ?


    E.g. show some image manipulation controls only after the image to be
    manipulated has finished loading. Also if you change the src of the
    image, you will be notified when it is ready, e.g. to read its new
    dimensions.


    Bye,
    Martin
     
    Martin Bialasinski, Aug 24, 2005
    #11
    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. David Segall
    Replies:
    2
    Views:
    457
    Thomas Kellerer
    Jan 2, 2007
  2. windandwaves

    some ideas for loading images one by one

    windandwaves, Aug 21, 2005, in forum: Javascript
    Replies:
    1
    Views:
    107
    |-|erc
    Aug 22, 2005
  3. Replies:
    4
    Views:
    331
  4. edfialk
    Replies:
    0
    Views:
    205
    edfialk
    May 10, 2007
  5. ofir
    Replies:
    0
    Views:
    195
Loading...

Share This Page