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

how does this function work?

P: n/a
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
Share this Question
Share on Google+
16 Replies


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

P: n/a
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 discussion thread is closed

Replies have been disabled for this discussion.