By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
448,563 Members | 1,307 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 448,563 IT Pros & Developers. It's quick & easy.

loading images one by one

P: n/a
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?
Aug 21 '05 #1
Share this Question
Share on Google+
10 Replies


P: n/a
Lee
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="bloc k";
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>

Aug 21 '05 #2

P: n/a
ASM
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="bloc k";
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
Aug 21 '05 #3

P: n/a
Lee
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.

Aug 21 '05 #4

P: n/a
ASM
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
Aug 21 '05 #5

P: n/a
ASM <st*********************@wanadoo.fr.invalid> 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
Aug 22 '05 #6

P: n/a
Lee
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.

Aug 22 '05 #7

P: n/a
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
Aug 22 '05 #8

P: n/a
ASM
Martin Bialasinski wrote:
ASM <st*********************@wanadoo.fr.invalid> 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
Aug 22 '05 #9

P: n/a
ASM
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
Aug 22 '05 #10

P: n/a
ASM <st*********************@wanadoo.fr.invalid> wrote:
Martin Bialasinski wrote:
ASM <st*********************@wanadoo.fr.invalid> 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
Aug 24 '05 #11

This discussion thread is closed

Replies have been disabled for this discussion.