how does this function work?

G

Geoff Cox

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();
 
A

ASM

Geoff said:
Hello,
Click to expand...

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

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

picture[ig].onload = preload_imgs;

which I don't understand.
Click to expand...


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


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

picture[ig].onload = preload_imgs;

which I don't understand.
Click to expand...

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();
 
G

Geoff Cox

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

Hi Stephane!

Yes I diid - thanks alot. Please do remove it now.
Did you try it ?
Does it work ?
Click to expand...

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

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

Geoff Cox

On Sat, 17 Sep 2005 12:46:32 +0200, ASM

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
 
A

ASM

Geoff said:
On Sat, 17 Sep 2005 12:46:32 +0200, ASM

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

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();
 
G

Geoff Cox

On Sat, 17 Sep 2005 14:33:49 +0200, ASM

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
 
A

ASM

Geoff said:
On Sat, 17 Sep 2005 14:33:49 +0200, ASM

Stephane,

Have tried code below - I imagine that in

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

create; is a typo?

Having changed that to
Click to expand...

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

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
 
G

Geoff Cox

On Sat, 17 Sep 2005 15:39:18 +0200, ASM

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

Robi

Geoff Cox wrote in message news:[email protected]...
On Sat, 17 Sep 2005 15:39:18 +0200, ASM

Stephen,

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

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

HTH
 
G

Geoff Cox

Geoff Cox wrote in message news:[email protected]...
On Sat, 17 Sep 2005 15:39:18 +0200, ASM

Stephen,

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

that's because <body> doesn't "exist" yet
Click to expand...

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

HTH
Click to expand...
 
A

ASM

Geoff said:
On Sat, 17 Sep 2005 15:39:18 +0200, ASM

Stephen,

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

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

Geoff Cox

an object" ... Can you see why?!

Once more ?
this time I did try it and it is ok for me
Click to expand...

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

Geoff Cox

On Sun, 18 Sep 2005 00:14:45 +0200, ASM

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

Geoff Cox

On Sun, 18 Sep 2005 00:14:45 +0200, ASM

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
 
A

ASM

Geoff said:
On Sun, 18 Sep 2005 00:14:45 +0200, ASM

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

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

see same page I've changed :
http://perso.wanadoo.fr/stephane.moriaux/truc/preload_images.htm
Is this to do with your treck for showing the images from the cache?
Click to expand...

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

in new page it would do
(and also image 0)
 

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

starting again! why fails? 31
How do I make this craftinfsystem Work 1
How does this for loop work? 2
How to make a div select work? 5
Centering picture element for larger screen sizes 2
What "might" I be doing wrong with this snippet? 6
How to have two html audio players on one page? 0
How does DataFrame.interpolation() work (in its source code)? 0

Members online

No members online now.
Total: 33 (members: 0, guests: 33)
Robots: 652

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,057
Latest member
KetoBeezACVGummies

Latest Threads

Top