Connecting Tech Pros Worldwide Forums | Help | Site Map

how does this function work?

Geoff Cox
Guest
 
Posts: n/a
#1: Sep 17 '05
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();

ASM
Guest
 
Posts: n/a
#2: Sep 17 '05

re: how does this function work?


Geoff Cox wrote:[color=blue]
> Hello,[/color]

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 ?
[color=blue]
> Can someone please explain how this preload images function works?[/color]

Did you try it ?
Does it work ?
[color=blue]
> It is the
>
> picture[ig].onload = preload_imgs;
>
> which I don't understand.[/color]


// 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
ASM
Guest
 
Posts: n/a
#3: Sep 17 '05

re: how does this function work?


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 ?
[color=blue]
> Can someone please explain how this preload images function works?[/color]


Did you try it ?
Does it work ?
[color=blue]
> It is the
>
> picture[ig].onload = preload_imgs;
>
> which I don't understand.[/color]

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();
Geoff Cox
Guest
 
Posts: n/a
#4: Sep 17 '05

re: how does this function work?


On Sat, 17 Sep 2005 12:46:32 +0200, ASM
<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
[color=blue]
>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 ?[/color]

Hi Stephane!

Yes I diid - thanks alot. Please do remove it now.
[color=blue]
>Did you try it ?
>Does it work ?[/color]

Not too sure now ! Will try out your code below!

Cheers

Geoff



[color=blue]
>[color=green]
> > It is the
> >
> > picture[ig].onload = preload_imgs;
> >
> > which I don't understand.[/color]
>
>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();[/color]

Geoff Cox
Guest
 
Posts: n/a
#5: Sep 17 '05

re: how does this function work?


On Sat, 17 Sep 2005 12:46:32 +0200, ASM
<stephanemoriaux.NoAdmin@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
[color=blue]
> // 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();[/color]

ASM
Guest
 
Posts: n/a
#6: Sep 17 '05

re: how does this function work?


Geoff Cox wrote:[color=blue]
> On Sat, 17 Sep 2005 12:46:32 +0200, ASM
> <stephanemoriaux.NoAdmin@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?[/color]

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
Geoff Cox
Guest
 
Posts: n/a
#7: Sep 17 '05

re: how does this function work?


On Sat, 17 Sep 2005 14:33:49 +0200, ASM
<stephanemoriaux.NoAdmin@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


[color=blue]
> // 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();[/color]

ASM
Guest
 
Posts: n/a
#8: Sep 17 '05

re: how does this function work?


Geoff Cox wrote:[color=blue]
> On Sat, 17 Sep 2005 14:33:49 +0200, ASM
> <stephanemoriaux.NoAdmin@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[/color]

good idea :-)
[color=blue]
> 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');[/color]

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
Geoff Cox
Guest
 
Posts: n/a
#9: Sep 17 '05

re: how does this function work?


On Sat, 17 Sep 2005 15:39:18 +0200, ASM
<stephanemoriaux.NoAdmin@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>



Robi
Guest
 
Posts: n/a
#10: Sep 17 '05

re: how does this function work?


Geoff Cox wrote in message news:u4boi118qidhq2ubn4dbj2g6u5uaoskf9e@4ax.com...[color=blue]
> On Sat, 17 Sep 2005 15:39:18 +0200, ASM
> <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
>
> Stephen,
>
> I get error "document.getElementsByTagName('BODY')[0] is null or not
> an object" ... Can you see why?![/color]

that's because <body> doesn't "exist" yet

[color=blue]
> <html>
> <HEAD>
> <script type="text/javascript">[/color]
....[color=blue]
> document.getElementsByTagName('BODY')[0].appendChild('info');[/color]
.... document.getElementsByTagName('HEAD')[0] exists
[color=blue]
> 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>[/color]

HTH
Geoff Cox
Guest
 
Posts: n/a
#11: Sep 17 '05

re: how does this function work?


On Sat, 17 Sep 2005 11:13:04 -0500, "Robi" <me@privacy.net> wrote:
[color=blue]
>Geoff Cox wrote in message news:u4boi118qidhq2ubn4dbj2g6u5uaoskf9e@4ax.com...[color=green]
>> On Sat, 17 Sep 2005 15:39:18 +0200, ASM
>> <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
>>
>> Stephen,
>>
>> I get error "document.getElementsByTagName('BODY')[0] is null or not
>> an object" ... Can you see why?![/color]
>
>that's because <body> doesn't "exist" yet[/color]

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

[color=blue]
>
>[color=green]
>> <html>
>> <HEAD>
>> <script type="text/javascript">[/color]
>...[color=green]
>> document.getElementsByTagName('BODY')[0].appendChild('info');[/color]
>... document.getElementsByTagName('HEAD')[0] exists
>[color=green]
>> 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>[/color]
>
>HTH[/color]

ASM
Guest
 
Posts: n/a
#12: Sep 17 '05

re: how does this function work?


Geoff Cox wrote:[color=blue]
> On Sat, 17 Sep 2005 15:39:18 +0200, ASM
> <stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
>
> Stephen,
>
> I get error "document.getElementsByTagName('BODY')[0] is null or not
> an object" ... Can you see why?![/color]

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
Geoff Cox
Guest
 
Posts: n/a
#13: Sep 17 '05

re: how does this function work?


On Sat, 17 Sep 2005 21:51:35 +0200, ASM
<stephanemoriaux.NoAdmin@wanadoo.fr.invalid> wrote:
[color=blue]
> an object" ... Can you see why?!
>
>Once more ?
>this time I did try it and it is ok for me[/color]

Stephane,

I run code below and only get

Image #1 loading

in the browser?!!

What's happening?

Geoff

[color=blue]
>
>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>[/color]

ASM
Guest
 
Posts: n/a
#14: Sep 17 '05

re: how does this function work?


Geoff Cox wrote:[color=blue]
> Stephane,
>
> I run code below and only get
>
> Image #1 loading
>
> in the browser?!!
>
> What's happening?[/color]

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
Geoff Cox
Guest
 
Posts: n/a
#15: Sep 18 '05

re: how does this function work?


On Sun, 18 Sep 2005 00:14:45 +0200, ASM
<stephanemoriaux.NoAdmin@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.







[color=blue]
>Geoff Cox wrote:[color=green]
>> Stephane,
>>
>> I run code below and only get
>>
>> Image #1 loading
>>
>> in the browser?!!
>>
>> What's happening?[/color]
>
>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[/color]

Geoff Cox
Guest
 
Posts: n/a
#16: Sep 18 '05

re: how does this function work?


On Sun, 18 Sep 2005 00:14:45 +0200, ASM
<stephanemoriaux.NoAdmin@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
ASM
Guest
 
Posts: n/a
#17: Sep 18 '05

re: how does this function work?


Geoff Cox wrote:[color=blue]
> On Sun, 18 Sep 2005 00:14:45 +0200, ASM
> <stephanemoriaux.NoAdmin@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?[/color]

0 & 1 & 2 & 3 & 4 & 5 & 6 & 7 = 8
0 & 1 & 2 & 3 & 4 & 5 & 6 = 7

and image 0 isn't opened/downloaded ?
[color=blue]
> How should I change your code?[/color]

see same page I've changed :
http://perso.wanadoo.fr/stephane.mor...oad_images.htm
[color=blue]
> Is this to do with your treck for showing the images from the cache?[/color]

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
Closed Thread


Similar JavaScript / Ajax / DHTML bytes