473,396 Members | 1,724 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.

how does this function work?

Hello,

Can someone please explain how this preload images function works?

It is the

picture[ig].onload = preload_imgs;

which I don't understand.

Thanks

Geoff
var ig = 0;

function preload_imgs()
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}

preload_imgs();
Sep 17 '05 #1
16 1791
ASM
Geoff Cox wrote:
Hello,
Hello,

did you get back last correction of your page spa.htm ?
http://perso.wanadoo.fr/stephane.moriaux/truc/spa.htm
May I delete it from my site ?
Can someone please explain how this preload images function works?
Did you try it ?
Does it work ?
It is the

picture[ig].onload = preload_imgs;

which I don't understand.

// starting index
var ig = 0;

// number max images
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
// Ho the marvelous new image !
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}

preload_imgs();
--
Stephane Moriaux et son [moins] vieux Mac
Sep 17 '05 #2
ASM
Hello,

did you get back last correction of your page spa.htm ?
http://perso.wanadoo.fr/stephane.moriaux/truc/spa.htm
May I delete it from my site ?
Can someone please explain how this preload images function works?

Did you try it ?
Does it work ?
It is the

picture[ig].onload = preload_imgs;

which I don't understand.


There was an error in this example !
// starting index
var ig = 0;

// number max images
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
// Ho! What marvelous new image !
picture[ig] = new Image();

// on this new image loaded (stored in cache)
// launch function : preload_imgs()
// (notice : NO parenthesis !)
picture[ig].onload = preload_imgs;

// perhaps path to get this new image
// would be of some help ?
picture[ig].src = "pic" + ig + ".jpg";

// increase index
ig++;
}
// end of function
// it's time to re-launch it if needed
// fires only if image loading is finished
// works exactly as 'onload' in body tag
}

// when max index is reached
// loop of function preload_imgs() stops

// to launch preloding images during javascript readind
preload_imgs();
Sep 17 '05 #3
On Sat, 17 Sep 2005 12:46:32 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:
Hello,

did you get back last correction of your page spa.htm ?
http://perso.wanadoo.fr/stephane.moriaux/truc/spa.htm
May I delete it from my site ?
Hi Stephane!

Yes I diid - thanks alot. Please do remove it now.
Did you try it ?
Does it work ?
Not too sure now ! Will try out your code below!

Cheers

Geoff

It is the

picture[ig].onload = preload_imgs;

which I don't understand.


There was an error in this example !
// starting index
var ig = 0;

// number max images
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
// Ho! What marvelous new image !
picture[ig] = new Image();

// on this new image loaded (stored in cache)
// launch function : preload_imgs()
// (notice : NO parenthesis !)
picture[ig].onload = preload_imgs;

// perhaps path to get this new image
// would be of some help ?
picture[ig].src = "pic" + ig + ".jpg";

// increase index
ig++;
}
// end of function
// it's time to re-launch it if needed
// fires only if image loading is finished
// works exactly as 'onload' in body tag
}

// when max index is reached
// loop of function preload_imgs() stops

// to launch preloding images during javascript readind
preload_imgs();


Sep 17 '05 #4
On Sat, 17 Sep 2005 12:46:32 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

Have tried code below and it works fine except the last image,
pic6.jpg does take a little longer (only 1 or 2 seconds) than the
others to display. Any reason for that?

Geoff
// starting index
var ig = 0;

// number max images
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
// Ho! What marvelous new image !
picture[ig] = new Image();

// on this new image loaded (stored in cache)
// launch function : preload_imgs()
// (notice : NO parenthesis !)
picture[ig].onload = preload_imgs;

// perhaps path to get this new image
// would be of some help ?
picture[ig].src = "pic" + ig + ".jpg";

// increase index
ig++;
}
// end of function
// it's time to re-launch it if needed
// fires only if image loading is finished
// works exactly as 'onload' in body tag
}

// when max index is reached
// loop of function preload_imgs() stops

// to launch preloding images during javascript readind
preload_imgs();


Sep 17 '05 #5
ASM
Geoff Cox wrote:
On Sat, 17 Sep 2005 12:46:32 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

Have tried code below and it works fine except the last image,
pic6.jpg does take a little longer (only 1 or 2 seconds) than the
others to display. Any reason for that?


try this one insteed to see what happens
(perhaps ig_max value would be '6' ?)

// starting index
var ig = 0;

// number max images
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
// to indicate on page which image is to download
var info = document;createElement('P');
info.innerHTML = 'Image #'+ig+' loading';
document.body.appendChild('info');

// Ho! What marvelous new image !
picture[ig] = new Image();

// on this new image loaded (stored in cache)
// launch function : preload_imgs()
// (notice : NO parenthesis !)

picture[ig].onload = preload_imgs;

// perhaps path to get this new image
// would be of some help ?
picture[ig].src = "pic" + ig + ".jpg";

// increase index
ig++;
}
// end of function
// it's time to re-launch it if needed
// fires only if image loading is finished
// works exactly as 'onload' in body tag

// to indicate function did its job
var info = document.createElement('h3');
info.style.color='red';
info.innerHTML = 'End of job - Was index #'+ig;
document.body.appendChild('info');
}

// when max index is reached
// loop of function preload_imgs() stops

// to launch preloding images during javascript readind
preload_imgs();

--
Stephane Moriaux et son [moins] vieux Mac
Sep 17 '05 #6
On Sat, 17 Sep 2005 14:33:49 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

Have tried code below - I imagine that in

var info = document;createElement('P');

create; is a typo?

Having changed that to

var info = document.createElement('P');

I get an error message "document.body is either null or not object"

for the line

document.body.appendChild('info');

??

Geoff
// starting index
var ig = 0;

// number max images
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
// to indicate on page which image is to download
var info = document;createElement('P');
info.innerHTML = 'Image #'+ig+' loading';
document.body.appendChild('info');

// Ho! What marvelous new image !
picture[ig] = new Image();

// on this new image loaded (stored in cache)
// launch function : preload_imgs()
// (notice : NO parenthesis !)

picture[ig].onload = preload_imgs;

// perhaps path to get this new image
// would be of some help ?
picture[ig].src = "pic" + ig + ".jpg";

// increase index
ig++;
}
// end of function
// it's time to re-launch it if needed
// fires only if image loading is finished
// works exactly as 'onload' in body tag

// to indicate function did its job
var info = document.createElement('h3');
info.style.color='red';
info.innerHTML = 'End of job - Was index #'+ig;
document.body.appendChild('info');
}

// when max index is reached
// loop of function preload_imgs() stops

// to launch preloding images during javascript readind
preload_imgs();


Sep 17 '05 #7
ASM
Geoff Cox wrote:
On Sat, 17 Sep 2005 14:33:49 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

Have tried code below - I imagine that in

var info = document;createElement('P');

create; is a typo?

Having changed that to
good idea :-)
var info = document.createElement('P');

I get an error message "document.body is either null or not object"

for the line

document.body.appendChild('info');


with FF it would have to work ...

use long way insteed :

document.getElementsByTagName('BODY')[0].appendChild('info');

and, by precaution,
do not forget to have a tag 'body' in your test page
--
Stephane Moriaux et son [moins] vieux Mac
Sep 17 '05 #8
On Sat, 17 Sep 2005 15:39:18 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephen,

I get error "document.getElementsByTagName('BODY')[0] is null or not
an object" ... Can you see why?!

Geoff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">
<SCRIPT SRC="slider.js"></SCRIPT>
<SCRIPT SRC="prototype-1.3.1.js"></SCRIPT>
<script src="questions.js"></script>

<script type="text/javascript">

var picture = new Array();
var ig = 0;
var ig_max = 7;

function preload_imgs()
{
if(ig < ig_max)
{
var info = document.createElement('P');
info.innerHTML = 'Image #'+ig+' loading';
document.getElementsByTagName('BODY')[0].appendChild('info');
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
var info = document.createElement('h3');
info.style.color='red';
info.innerHTML = 'End of job - Was index #'+ig;
document.getElementsByTagName('BODY')[0].appendChild('info');

}

preload_imgs();

function fillTable()
{
document.getElementById('picture').src = window["picture"][6].src;
}

</script>
</head>

<BODY>

<script>
fillTable();
</script>

<table>
<tr>
<td><img ID='picture' src="" />loading</td>
</tr>
</table>

</BODY>
</html>

Sep 17 '05 #9
Geoff Cox wrote in message news:u4********************************@4ax.com...
On Sat, 17 Sep 2005 15:39:18 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephen,

I get error "document.getElementsByTagName('BODY')[0] is null or not
an object" ... Can you see why?!
that's because <body> doesn't "exist" yet

<html>
<HEAD>
<script type="text/javascript"> .... document.getElementsByTagName('BODY')[0].appendChild('info'); .... document.getElementsByTagName('HEAD')[0] exists
function fillTable() //<--- in this function you would have 'body' accessible
{
document.getElementById('picture').src = window["picture"][6].src;
}

</script>
</head>

<BODY> <!-- here is where getElementsByTagName('BODY')[0] is accessible -->

<script>
fillTable(); //<--- in this function you would have 'body' accessible
</script>

<table>
<tr>
<td><img ID='picture' src="" />loading</td>
</tr>
</table>

</BODY>
</html>


HTH
Sep 17 '05 #10
On Sat, 17 Sep 2005 11:13:04 -0500, "Robi" <me@privacy.net> wrote:
Geoff Cox wrote in message news:u4********************************@4ax.com...
On Sat, 17 Sep 2005 15:39:18 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephen,

I get error "document.getElementsByTagName('BODY')[0] is null or not
an object" ... Can you see why?!
that's because <body> doesn't "exist" yet


Robi,

YOu mean the code cannot run like this? I have tried putting
preload_imgs() and fillTable in <body onload but still get errors -
can you say what the code should be?!

Thanks

Geoff


<html>
<HEAD>
<script type="text/javascript">

...
document.getElementsByTagName('BODY')[0].appendChild('info');

... document.getElementsByTagName('HEAD')[0] exists
function fillTable() //<--- in this function you would have 'body' accessible
{
document.getElementById('picture').src = window["picture"][6].src;
}

</script>
</head>

<BODY> <!-- here is where getElementsByTagName('BODY')[0] is accessible -->

<script>
fillTable(); //<--- in this function you would have 'body' accessible
</script>

<table>
<tr>
<td><img ID='picture' src="" />loading</td>
</tr>
</table>

</BODY>
</html>


HTH


Sep 17 '05 #11
ASM
Geoff Cox wrote:
On Sat, 17 Sep 2005 15:39:18 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephen,

I get error "document.getElementsByTagName('BODY')[0] is null or not
an object" ... Can you see why?!


Once more ?
this time I did try it and it is ok for me

after your tests, lines marked with /* */
are to delete

<html>
<head>
<script type="text/javascript">

var ig = 1;
var ig_max = 7;
var picture = new Array();

function preload_imgs()
{
if(ig < ig_max)
{
// to indicate on page which image is to download /* */
var info = document.createElement('P'); /* */
info.innerHTML = 'Image #'+ig+' loading'; /* */
document.body.appendChild(info); /* */

picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpeg";
ig++;
}
// to indicate function did its job /* */
else /* */
{ /* */
var info = document.createElement('h3'); /* */
info.style.color='red'; /* */
info.innerHTML = 'End of job - Was index #'+ig; /* */
document.body.appendChild(info); /* */
// a trick to display images from cache /* */
ig=1; /* */
setTimeout('display_imgs()',500) /* */
} /* */
}

// because body is unknonw when /* delete from this line */
// to write on page is asked
// to launch preloding images
// we have to wait end of page loading
onload = preload_imgs;

function display_imgs() {
if(ig<ig_max) {
imag = document.createElement('IMG');
imag.src = picture[ig].src;
document.body.appendChild(imag);
setTimeout('display_imgs()',1000)
ig++
}
} /* to this line */

// do next line working after tests
// prelod_imgs();

</script>
</head>
<!-- body> <p> no need of body tag </p> </body -->
</html>

--
Stephane Moriaux et son [moins] vieux Mac
Sep 17 '05 #12
On Sat, 17 Sep 2005 21:51:35 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:
an object" ... Can you see why?!

Once more ?
this time I did try it and it is ok for me
Stephane,

I run code below and only get

Image #1 loading

in the browser?!!

What's happening?

Geoff


after your tests, lines marked with /* */
are to delete

<html>
<head>
<script type="text/javascript">

var ig = 1;
var ig_max = 7;
var picture = new Array();

function preload_imgs()
{
if(ig < ig_max)
{
// to indicate on page which image is to download /* */
var info = document.createElement('P'); /* */
info.innerHTML = 'Image #'+ig+' loading'; /* */
document.body.appendChild(info); /* */

picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpeg";
ig++;
}
// to indicate function did its job /* */
else /* */
{ /* */
var info = document.createElement('h3'); /* */
info.style.color='red'; /* */
info.innerHTML = 'End of job - Was index #'+ig; /* */
document.body.appendChild(info); /* */
// a trick to display images from cache /* */
ig=1; /* */
setTimeout('display_imgs()',500) /* */
} /* */
}

// because body is unknonw when /* delete from this line */
// to write on page is asked
// to launch preloding images
// we have to wait end of page loading
onload = preload_imgs;

function display_imgs() {
if(ig<ig_max) {
imag = document.createElement('IMG');
imag.src = picture[ig].src;
document.body.appendChild(imag);
setTimeout('display_imgs()',1000)
ig++
}
} /* to this line */

// do next line working after tests
// prelod_imgs();

</script>
</head>
<!-- body> <p> no need of body tag </p> </body -->
</html>


Sep 17 '05 #13
ASM
Geoff Cox wrote:
Stephane,

I run code below and only get

Image #1 loading

in the browser?!!

What's happening?


it is happening you did miss or made a mistake

see here where it works (FF, Camino, Opera, Safari, IE)
http://perso.wanadoo.fr/stephane.mor...oad_images.htm

--
Stephane Moriaux et son [moins] vieux Mac
Sep 17 '05 #14
On Sun, 18 Sep 2005 00:14:45 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

All is well - my mistake I ahdn't chnaged your code to .jpg!

Lots of thanks!

Cheers

Geoff

PS please remove your file when you wish to.



Geoff Cox wrote:
Stephane,

I run code below and only get

Image #1 loading

in the browser?!!

What's happening?


it is happening you did miss or made a mistake

see here where it works (FF, Camino, Opera, Safari, IE)
http://perso.wanadoo.fr/stephane.mor...oad_images.htm


Sep 18 '05 #15
On Sun, 18 Sep 2005 00:14:45 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

back again!

Your code works fine for

var ig = 1;
var ig_max = 8;

when I have 7 images named pic1.jpg to pic7.jpg but if I change to
using 7 images named pic0.jpg to pic6.jpg and use

var ig = 0;
var ig_max = 7;

the code only shows 6 images from the cache, missing out pic0.jpg,
and I cannot see why?

How should I change your code?

Is this to do with your treck for showing the images from the cache?

Cheers

Geoff
Sep 18 '05 #16
ASM
Geoff Cox wrote:
On Sun, 18 Sep 2005 00:14:45 +0200, ASM
<st*********************@wanadoo.fr.invalid> wrote:

Stephane,

back again!

Your code works fine for

var ig = 1;
var ig_max = 8;

when I have 7 images named pic1.jpg to pic7.jpg but if I change to
using 7 images named pic0.jpg to pic6.jpg and use

var ig = 0;
var ig_max = 7;

the code only shows 6 images from the cache, missing out pic0.jpg,
and I cannot see why?
0 & 1 & 2 & 3 & 4 & 5 & 6 & 7 = 8
0 & 1 & 2 & 3 & 4 & 5 & 6 = 7

and image 0 isn't opened/downloaded ?
How should I change your code?
see same page I've changed :
http://perso.wanadoo.fr/stephane.mor...oad_images.htm
Is this to do with your treck for showing the images from the cache?


test showing images from cache would show all
downloaded images (I think ?)

in new page it would do
(and also image 0)
--
Stephane Moriaux et son [moins] vieux Mac
Sep 18 '05 #17

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: lawrence | last post by:
Suppose I create dynamic web pages with 3 functions (which call other functions to make everything happen, but these 3 you might think of as being the top layer): registerSessions();...
8
by: Douglas | last post by:
**** Post for FREE via your newsreader at post.usenet.com **** Hello, The following code does not compile if line 3 is uncommented "using namespace std". I do not understand it. Could...
4
by: rick | last post by:
The following basic script works fine in firefox by not in IE. Can anyone spot the problem? In IE I can only delete the first line but not the lines created by javascript. Also, look at the HTML...
2
by: mark4asp | last post by:
Why does this not work in Mozilla ? <http://homepage.ntlworld.com/mark.pawelek/code/animals.html> The optHabitat_change() event does not fire. What am I doing wrong here? PS: It should...
15
by: Generic Usenet Account | last post by:
While I have a very good feel for how inlining works, I fail to see how in the world inlining can work if the inlined function is not described "in place" in a header file, but rather defined in a...
4
by: ezra epstein | last post by:
Aother head banger for me. Below is a complete example of the code Using Postgres 7.4, the function "test" gets this: psql:temp3.sql:10: ERROR: syntax error at or near "%" at character 135...
44
by: Bamber | last post by:
Why does f get returned ? (compiled with gcc). #include<stdio.h> int func(int a); main() { int f; f=func(7); printf("f=%d",f);
52
by: Julie | last post by:
I'm supporting an application at work. Below are some code segments that I can't understand how they work. First let me say, I would never code this standard. I'm just really creeped out that it...
89
by: Cuthbert | last post by:
After compiling the source code with gcc v.4.1.1, I got a warning message: "/tmp/ccixzSIL.o: In function 'main';ex.c: (.text+0x9a): warning: the 'gets' function is dangerous and should not be...
14
by: webEater | last post by:
I have a problem, it's not browser specific, and I don't get a solution. I have an (X)HTML document, I show you a part of it: .... <!--<div class="pad">--> <div id="eventImages"><img src=""...
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
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
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
0
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
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.