473,396 Members | 2,014 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,396 software developers and data experts.

loading images one by one

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
10 3310
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
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
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
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
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
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
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
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
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
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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

1
by: Stacey | last post by:
Hi, I'm hoping for a bit of advise-- I have a (relatively, from the point-of-view of this dilettante) complex script that attempts to preload certain images in order to trigger one of a series of...
4
by: Adrian MacNair | last post by:
Hi, I created an image gallery which displays 63 images in a slideshow. The problem is that the show was slow because each image loaded one at a time during the show. No problem right? I just...
15
by: Geoff Cox | last post by:
Hello I have following type of code in the header function pre_load_pics() { if (document.images) { var image1 = new Image(400,265); image1.scr = "pic1.jpg";
4
by: VR | last post by:
Hi, I am trying to have a menu item (which is an HTML img) to change as a mouse moves over it. So, my code looks something like this: <a onmouseover="ActivateImage('MyImage');"...
2
by: Jean Pierre Daviau | last post by:
When I have something like this in a js file. listeImg = new Array(); listeImg = new Image(w,h); listeImg.src = "centre1.jpg"; etc Are the images loaded after the page is loaded? In the same...
6
by: Ivan Bútora | last post by:
I have recently looked at http://alistapart.com/articles/imagegallery to implement a simple picture gallery on a webpage that I'm working on. Everything works fine; however, I have one question....
0
by: speedcoder | last post by:
hi all, i'm stumped. my applet used to load images over the network. (it was actually designed by someone else.) yes, the applet used to load each image file independently over the network and...
1
by: agatha.life | last post by:
I did a javascript for the loading of images (I didn't want to have the images loaded in "on loading" because they are too many). The website is for a model and if you look at the codeof pages (...
3
jeremydowe
by: jeremydowe | last post by:
Hi, I have noticed that quite a few websites use a preloading graphic (i.e spining circle) to show the that the site is loading images while the user waits. How can I add this to my website? ...
1
by: mlikesit | last post by:
I am trying to get the following code to pre-load some images before re-dirrecting the user. The problem is that the onError event gets called for all of the images immediately. I've tripple...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
0
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
0
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.