loading images one by one

W

windandwaves

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?
 
L

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?
Click to expand...

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>
 
A

ASM

Lee said:
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);
Click to expand...

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)">
Click to expand...

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

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
Click to expand...
on loaded page :
- anything can prove first image is loaded (nor complete)
Click to expand...


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.
 
A

ASM

Lee said:
ASM said:




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

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()
Click to expand...

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.
Click to expand...

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

Martin Bialasinski

ASM said:
"rien ne prouve que les images sont finies d'être chargées
dès la fin du chargement de la page."
Click to expand...

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
 
L

Lee

ASM said:
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
Click to expand...

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.
 
W

windandwaves

Lee said:
ASM said:

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.
Click to expand...


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
 
A

ASM

Martin said:
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.
Click to expand...

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 ?
 
A

ASM

Lee said:
ASM said:



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

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:
Click to expand...

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.
Click to expand...

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

Martin Bialasinski

ASM said:
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).
Click to expand...

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 ?
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

some ideas for loading images one by one 1
Flip-Cards with Local Images 1
Sort by number of characters 1
Help with Visual Lightbox: Scripts 2
Having difficulty with the layout of these images / video for this web page 2
Login form no longer working 2
Help with code 0
JQuery hover error 3

Members online

Total: 36 (members: 2, guests: 34)
Robots: 179

Forum statistics

Threads
473,764
Messages
2,569,566
Members
45,041
Latest member
RomeoFarnh

Latest Threads

Top