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

starting again! why fails?

P: n/a
Hello,

The following code works with

document.getElementById('picture').src = window["picture"][0].src;

but not if I increase the index to 1, ie

document.getElementById('picture').src = window["picture"][1].src;

Why is this?!

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

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">

<script type="text/javascript">

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

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

preload_imgs();

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

</script>
</head>

<body onload="fillTable()">
<table>
<tr>
<td><img ID='picture' src="" />loading</td>
</tr>
</table>
</body>
</html>

Sep 17 '05 #1
Share this Question
Share on Google+
40 Replies


P: n/a
Geoff Cox <ge*******@notquitecorrectfreeuk.com> wrote in message news:hq********************************@4ax.com...
Hello,

The following code works with

document.getElementById('picture').src = window["picture"][0].src;

but not if I increase the index to 1, ie

document.getElementById('picture').src = window["picture"][1].src;

Why is this?!

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

Your code appends only one element to the empty array 'picture'. Change 'if' to 'while'.
picture[ig].onload = preload_imgs;


What do you consider this line to do?

--
S.C.
Sep 17 '05 #2

P: n/a
On Sat, 17 Sep 2005 23:51:02 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}


Your code appends only one element to the empty array 'picture'. Change 'if' to 'while'.
picture[ig].onload = preload_imgs;


What do you consider this line to do?


Stephen,

Apologies for missing your reply - perhaps you could look at the
previous threas "how does this function work" as this code is written
by Stephane and I'm not clear myself what the above line does! Except
that his code does actually bring down all the images!

Cheers

Geoff

Sep 18 '05 #3

P: n/a
Lee
Geoff Cox said:

Hello,

The following code works with

document.getElementById('picture').src = window["picture"][0].src;

but not if I increase the index to 1, ie

document.getElementById('picture').src = window["picture"][1].src;

Why is this?!

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

<html>
<HEAD>

<link rel=stylesheet href="slider.css" type="text/css">

<script type="text/javascript">

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

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

preload_imgs();


That's a pretty lousy way to "pre" load images. First consider
the time and resources you've wasted trying to understand it in
the first place, and now, predictably, when you try to make a
small modification, you have to start asking all over again.

Secondly, this code doesn't guarantee that the images will be
loaded before the page loads. That's why I put "pre" in quotes,
and it's why your code fails when you try to refer to the second
image as soon as the page loads.

You would be much better off with something simple like:

<script type="text/javascript">

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}

Sep 18 '05 #4

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:qr********************************@4ax.com...
On Sat, 17 Sep 2005 23:51:02 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}


Your code appends only one element to the empty array 'picture'. Change
'if' to 'while'.
picture[ig].onload = preload_imgs;


What do you consider this line to do?


Stephen,

Apologies for missing your reply - perhaps you could look at the
previous threas "how does this function work" as this code is written
by Stephane and I'm not clear myself what the above line does! Except
that his code does actually bring down all the images!


Geoff, you REALLY should not be using code in your projects that you have
cut and paste from here unless you understand it. You are getting in a real
mess. There is no problem with asking for help in this NG but you are in
adanger of ending up with code that you are unable to maintain yourself.

Just do a google for preloading images and read up on this subject.
picture[ig].onload = preload_imgs;


This line sets a function call to preload_imgs() when the image is loaded.
So in theory the function preload_imgs will call itself agin when it is
ready for the next image. I am not sure this is the best technique for
preloading images but you should really google this for yourself.
Sep 18 '05 #5

P: n/a
Lee
Lee said:
That's a pretty lousy way to "pre" load images.


I forgot to mention that it also ensures that the images are downloaded one at a
time, even in browsers that would normally download several in parallel.

Sep 18 '05 #6

P: n/a
On 18 Sep 2005 10:06:23 -0700, Lee <RE**************@cox.net> wrote:

You would be much better off with something simple like:

<script type="text/javascript">

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}


Lee,

Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be? Does the

picture[ig].onload = preload_imgs;

make the first image available more quickly?

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

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

preload_imgs();

Cheers

Geoff
Sep 18 '05 #7

P: n/a
On Sun, 18 Sep 2005 17:46:20 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
This line sets a function call to preload_imgs() when the image is loaded.
So in theory the function preload_imgs will call itself agin when it is
ready for the next image. I am not sure this is the best technique for
preloading images but you should really google this for yourself.


Zoe,

I would indeed like to undertand Stephane's code as you will see from
my other posting that it is twice as quick as the simpler code in
making the first image ready for use!

Cheers

Geoff
Sep 18 '05 #8

P: n/a
Lee
Geoff Cox said:

On Sun, 18 Sep 2005 17:46:20 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
This line sets a function call to preload_imgs() when the image is loaded.
So in theory the function preload_imgs will call itself agin when it is
ready for the next image. I am not sure this is the best technique for
preloading images but you should really google this for yourself.


Zoe,

I would indeed like to undertand Stephane's code as you will see from
my other posting that it is twice as quick as the simpler code in
making the first image ready for use!


I don't know what "simpler code" you tried, but the code you're
using is much slower than it should be.

Sep 18 '05 #9

P: n/a
Lee
Geoff Cox said:

On 18 Sep 2005 10:06:23 -0700, Lee <RE**************@cox.net> wrote:

You would be much better off with something simple like:

<script type="text/javascript">

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}


Lee,

Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be? Does the


The code below makes the first image available in 13 seconds and the
next one available 13 seconds after that, and the next one 13 seconds
after that, etc.

The simpler code makes them all available in 33 seconds.

Which do you want?

Sep 18 '05 #10

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:pv********************************@4ax.com...
On 18 Sep 2005 10:06:23 -0700, Lee <RE**************@cox.net> wrote:

You would be much better off with something simple like:

<script type="text/javascript">

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}


Lee,

Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be?


No, your code does one at a time and takes about 13 seconds for each of
them. Just download them in one hit.

Have you considered the size of your images has an effect on this ?
Sep 18 '05 #11

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:59********************************@4ax.com...
On Sun, 18 Sep 2005 17:46:20 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
This line sets a function call to preload_imgs() when the image is loaded.
So in theory the function preload_imgs will call itself agin when it is
ready for the next image. I am not sure this is the best technique for
preloading images but you should really google this for yourself.


Zoe,

I would indeed like to undertand Stephane's code


What javascript references are you using ?

You should be able to lookup what

picture[ig].onload = preload_imgs;

might do !
Sep 18 '05 #12

P: n/a
On 18 Sep 2005 11:12:25 -0700, Lee <RE**************@cox.net> wrote:
Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be? Does the


The code below makes the first image available in 13 seconds and the
next one available 13 seconds after that, and the next one 13 seconds
after that, etc.

The simpler code makes them all available in 33 seconds.

Which do you want?


Lee,

I don't think that's the case. The

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}

takes 33 secs before the 1st image is ready to be used.

and the

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

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

preload_imgs()

takes 13 secs before the first image is ready to be used.

Now, using the 13 sec version when the app gets to the points where
the next images are displayed this happens much more quickly than if
they were beibng downloaded at these points so I think they must be
already in the cache ... Do you know where I should look to see if
indeed they are in the IE cache?

Cheers

Geoff

Sep 18 '05 #13

P: n/a
Lee
Geoff Cox said:

On 18 Sep 2005 11:12:25 -0700, Lee <RE**************@cox.net> wrote:
Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be? Does the


The code below makes the first image available in 13 seconds and the
next one available 13 seconds after that, and the next one 13 seconds
after that, etc.

The simpler code makes them all available in 33 seconds.

Which do you want?


Lee,

I don't think that's the case. The

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}

takes 33 secs before the 1st image is ready to be used.

and the

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

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

preload_imgs()

takes 13 secs before the first image is ready to be used.


Then there's something different about the way you are calling the
two functions. There is nothing about the code you are using that
will make it download images faster. It will download multiple
images more slowly, because it cannot download more than one at a
time.

Sep 18 '05 #14

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:u4********************************@4ax.com...
On 18 Sep 2005 11:12:25 -0700, Lee <RE**************@cox.net> wrote:
Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be? Does the


The code below makes the first image available in 13 seconds and the
next one available 13 seconds after that, and the next one 13 seconds
after that, etc.

The simpler code makes them all available in 33 seconds.

Which do you want?


Lee,

I don't think that's the case. The

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}

takes 33 secs before the 1st image is ready to be used.

and the

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

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

preload_imgs()

takes 13 secs before the first image is ready to be used.

Now, using the 13 sec version when the app gets to the points where
the next images are displayed this happens much more quickly than if
they were beibng downloaded at these points so I think they must be
already in the cache ...


ARRRRRRRRRRGGGGGGGGGGGGHHHHHHHHH !!

the 13 second version will not download them when they are need but will do
so on when the preload_imgs function is called.

Now please listem.

the 33 second version will get all 6 images in 33 seconds and then they can
be used,

the 13 second version will take 13 seconds for the first, 13 for the second
and download them sequentially !!!!!!

Now please decide which version you want to use and just use it.

Also please do some research of your own, I feel that we are spoon feeding
you here and you seem to always get the wrong end of the stick.

so far you have two solutions so which do you prefer ?
Sep 18 '05 #15

P: n/a
On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

ARRRRRRRRRRGGGGGGGGGGGGHHHHHHHHH !!

the 13 second version will not download them when they are need but will do
so on when the preload_imgs function is called.

Now please listem.

the 33 second version will get all 6 images in 33 seconds and then they can
be used,

the 13 second version will take 13 seconds for the first, 13 for the second
and download them sequentially !!!!!!


Zoe,

I have already said that the second, third, fourth etc images are
displayed when required much more quickly than if they were being
downloaded at those times so they must have already been downloaded.
Where is the fault in this logic?!

I could easily be proved wrong if you could tell me where to look to
see the cache contents, etiher the images are there or they are not
.... do you know where for IE?

Geoff

Sep 18 '05 #16

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:de********************************@4ax.com...
On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:

ARRRRRRRRRRGGGGGGGGGGGGHHHHHHHHH !!

the 13 second version will not download them when they are need but will
do
so on when the preload_imgs function is called.

Now please listem.

the 33 second version will get all 6 images in 33 seconds and then they
can
be used,

the 13 second version will take 13 seconds for the first, 13 for the
second
and download them sequentially !!!!!!
Zoe,

I have already said that the second, third, fourth etc images are
displayed when required much more quickly than if they were being
downloaded at those times so they must have already been downloaded.
Where is the fault in this logic?!


Which version is this for ?

I could easily be proved wrong if you could tell me where to look to
see the cache contents, etiher the images are there or they are not
... do you know where for IE?


i dont know off hand, probably temporay internet files but you could try
searching the interenet for an answer...
Sep 18 '05 #17

P: n/a
On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
var picture = new Array();
var ig = 0;
var ig_max = 7;

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

preload_imgs()


Zoe and Lee,

A little more information !

I have run my app with the above code and have kept an eye on the
Temporay Internet Folder - where I can see the pic0.jpg etc images.
This being the cache presumably.

What happens is that when I start the app the first image is displayed
in 13 seconds. By this time I can see both pic0 and pic1 in the cache.

After answering a few questions and before the next image is required
I can see that all the images have come down. Presumably this is where
the 33 seconds comes in, the images where all coming down in the
background.

The main point for me is to get the first image displayed as quicly as
possible and have the other images ready and waiting to be displayed
when required.

It looks as if the above code is best for this purpose.

So far no one has made clear to me how the first image is available
more quickly with this code and what

picture[ig].onload = preload_imgs;

does.

Stephane made the point that it must be " = preload_imgs" and not
"preload_imgs()" - what difference does the lack of () make?
Cheers

Geoff
Sep 18 '05 #18

P: n/a
Geoff Cox wrote:
<snip>
So far no one has made clear to me how the first image
is available more quickly with this code
Factors influencing the availability of downloaded images are many and
various, and cannot all be determined from javascript source code or
descriptions of javascript source code.
and what

picture[ig].onload = preload_imgs;

does.
It assigns a reference to a function object to the - onload - property
of an - Image - that is referred to by the value of an array element.
Stephane made the point that it must be " = preload_imgs"
and not "preload_imgs()" - what difference does the lack
of () make?


The parenthesise would result in the function object referred to by -
preload_imgs
- being called, and so it would be the return value form that function
call that would be assigned to the - onload - property of the - Image -
object instead of a reference to the function.

You will notice that having this explained does you little good as you
don't have the grounding in javascript needed to understand what it
means, or its implications.

Richard.
Sep 18 '05 #19

P: n/a
Geoff Cox wrote:
On 18 Sep 2005 10:06:23 -0700, Lee <RE**************@cox.net> wrote:
You would be much better off with something simple like:

<script type="text/javascript">

var picture = new Array();
for ( var ig=0; ig<7; ig++ ) {
picture[ig] = new Image();
picture[ig].src = "pic" + ig + ".jpg";
}

This code creates new image objects and gives their src attribute a path
to an image. The script will create the objects as fast as it can and
will not wait for each individual image to download before creating the
next object (likely all the objects will be created before the first
image even starts to download).

The browser will download the images as fast as it can, but it will
probably download 4 or so simultaneously. This will make the first
image download slower as it is competing with the other images for
bandwidth. If bandwidth is limited (say 56k modem) or the images are
very large (in comparison to the bandwidth) it will seem to be slow for
the first image. However, overall the images will download faster.

[...]
Just one thing though! The code below takes 13 secs before the first
image is ready for use and the code above takes 33 secs! Why would
this be? Does the

picture[ig].onload = preload_imgs;

make the first image available more quickly?

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

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

preload_imgs();
This code creates an image object and assigns the src attribute a value.
It also sets the onload attribute to call the function again - an
example of recursion.

When the first image is finished loading, its onload fires and the
function is called again - the next image object is created and the
recursion runs for another loop. The loop keeps getting called until ig= ig_max.


The variables picture, ig, ig_max are globals so that they are available
to each iteration of the recursive loop.

The effect is to cause the browser to download the images one at a time
rather than the normal case where images are downloaded asynchronously,
say 4 or more at once. It will be faster for each individual image
(hence the first one seems to download faster) but is probably slower
overall.

As Richard suggests, you need to thoroughly understand the code before
you take it anywhere near a commercial site (though if it's for a hobby
site or home page...).

The HTML 4 specification does not define an onload event for the img
element but it seems to be widely supported anyway. Strictly I guess
you should test for support and take some alternative action if it isn't
- testing in a wide variety of browsers will indicate whether that is
appropriate.

<URL:http://www.w3.org/TR/html4/interact/scripts.html#adef-onload>

Microsoft defines an onload attribute on a wider range of elements, but
I don't think you should depend on all of them being supported in all
browsers:

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onload.asp>


--
Rob
Sep 19 '05 #20

P: n/a
Geoff Cox <ge*******@notquitecorrectfreeuk.com> wrote in message news:qr********************************@4ax.com...
On Sat, 17 Sep 2005 23:51:02 +0100, "Stephen Chalmers"
<ig******@lycos.co.uk> wrote:
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}

Your code appends only one element to the empty array 'picture'. Change 'if' to 'while'.
picture[ig].onload = preload_imgs;


What do you consider this line to do?


Stephen,

Apologies for missing your reply - perhaps you could look at the
previous threas "how does this function work" as this code is written
by Stephane and I'm not clear myself what the above line does! Except
that his code does actually bring down all the images!

document.getElementById('picture').src = window["picture"][1].src;


Exactly when are you executing this line?
As your code loads sequentially, the second element of 'picture'
probably doesn't exist at the instant that it is referenced.
If you load your images using a loop, thereby building the 'picture'
array instantly, you would not have the problem.

BTW, the line would be better written as:

document.images['picture'].src = picture[1].src;

--
S.C.

Sep 19 '05 #21

P: n/a
RobG <rg***@iinet.net.au> wrote in message news:U6*****************@news.optus.net.au...
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}

preload_imgs();


This code creates an image object and assigns the src attribute a value.
It also sets the onload attribute to call the function again - an
example of recursion.

Can this be called recursion? The function is not actually calling itself
but just setting up a subsequent call to itself, which probably will not
occur before it terminates.
--
S.C.
Sep 19 '05 #22

P: n/a
Stephen Chalmers wrote:
RobG <rg***@iinet.net.au> wrote in message news:U6*****************@news.optus.net.au...
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}

preload_imgs();


This code creates an image object and assigns the src attribute a value.
It also sets the onload attribute to call the function again - an
example of recursion.


Can this be called recursion? The function is not actually calling itself
but just setting up a subsequent call to itself, which probably will not
occur before it terminates.


I pondered that. There are, to my limited understanding, two main
definitions of recursion[1]:

1. Something that is defined in terms of itself, and

2. Something that calls itself.

In order to be considered 'recursion' in a programming context,
subsequent calls should remain within the execution context of the first
call (usage of the term 'recursive' in the ECMAScript Language
specification - section 5.1.5 under "Argument list" seems to fit here),
however I don't think that meaning is explicitly defined anywhere.

I thought my use of 'recursion' fitted the second definition, but
thinking on it further it really is iteration rather than recursion as
the execution context of subsequent calls to the function are quite
independent of the first.

It is comparable to the use of setInterval or setTimeout - it's just
that in this case instead of some time interval being used to determine
when to run the function, an event is used instead.
1.
<URL:http://www.google.com.au/search?hl=en&hs=V3U&lr=&client=firefox-a&rls=org.mozilla:en-US:official&oi=defmore&q=define:Recursion>

[...]

--
Rob
Sep 19 '05 #23

P: n/a
On Sun, 18 Sep 2005 23:23:59 +0100, "Richard Cornford"
<Ri*****@litotes.demon.co.uk> wrote:
You will notice that having this explained does you little good as you
don't have the grounding in javascript needed to understand what it
means, or its implications.
Richard,

You have certainly failed to clarify the postion for me - but then I
suspect that you were just trying to make a point!

I have a background in science education and I always remember the
words of Sir Lawrence Bragg that a really good scientist can make even
the most complex theory comprehensible. Just a matter of how you go
about it.

Cheers

Geoff


Richard.



Sep 19 '05 #24

P: n/a
On Sun, 18 Sep 2005 23:54:28 GMT, RobG <rg***@iinet.net.au> wrote:
Rob,

Many thanks for the explanation. Just one question ...
This code creates an image object and assigns the src attribute a value.
It also sets the onload attribute to call the function again - an
example of recursion.
if (ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}

The assigning of the src attribute for the first picture comes after
calling the function again - at least it appears so above. I would
have thought the order would be

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

What am I mssing here?

Cheers

Geoff




When the first image is finished loading, its onload fires and the
function is called again - the next image object is created and the
recursion runs for another loop. The loop keeps getting called until ig
= ig_max.


The variables picture, ig, ig_max are globals so that they are available
to each iteration of the recursive loop.

The effect is to cause the browser to download the images one at a time
rather than the normal case where images are downloaded asynchronously,
say 4 or more at once. It will be faster for each individual image
(hence the first one seems to download faster) but is probably slower
overall.

As Richard suggests, you need to thoroughly understand the code before
you take it anywhere near a commercial site (though if it's for a hobby
site or home page...).

The HTML 4 specification does not define an onload event for the img
element but it seems to be widely supported anyway. Strictly I guess
you should test for support and take some alternative action if it isn't
- testing in a wide variety of browsers will indicate whether that is
appropriate.

<URL:http://www.w3.org/TR/html4/interact/scripts.html#adef-onload>

Microsoft defines an onload attribute on a wider range of elements, but
I don't think you should depend on all of them being supported in all
browsers:

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/events/onload.asp>


Sep 19 '05 #25

P: n/a
On Sun, 18 Sep 2005 23:54:28 GMT, RobG <rg***@iinet.net.au> wrote:

Rob,

Out of interest using Firefox the code below takes 33 seconds (as
against the 13 seconds when using IE) before the first image is
available.

Cheers

Geoff

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

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

preload_imgs();


Sep 19 '05 #26

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:o8********************************@4ax.com...
On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
var picture = new Array();
var ig = 0;
var ig_max = 7;

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

preload_imgs()


Zoe and Lee,

A little more information !

I have run my app with the above code and have kept an eye on the
Temporay Internet Folder - where I can see the pic0.jpg etc images.
This being the cache presumably.

What happens is that when I start the app the first image is displayed
in 13 seconds. By this time I can see both pic0 and pic1 in the cache.

After answering a few questions and before the next image is required
I can see that all the images have come down. Presumably this is where
the 33 seconds comes in, the images where all coming down in the
background.

The main point for me is to get the first image displayed as quicly as
possible and have the other images ready and waiting to be displayed
when required.

It looks as if the above code is best for this purpose.

So far no one has made clear to me how the first image is available
more quickly with this code and what

picture[ig].onload = preload_imgs;


I have said what this code does !!!

it create a call to the preload_imgs function when the currently loaded
image loads.

Image loads and when complete ask for the next image. I have said this
twice and so have others.

This means that it will take 13 seconds (or so ) for EACH image. Which is
slow.
Sep 19 '05 #27

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:df********************************@4ax.com...
On Sun, 18 Sep 2005 23:54:28 GMT, RobG <rg***@iinet.net.au> wrote:
Rob,

Many thanks for the explanation. Just one question ...
This code creates an image object and assigns the src attribute a value.
It also sets the onload attribute to call the function again - an
example of recursion.


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

The assigning of the src attribute for the first picture comes after
calling the function again - at least it appears so above. I would
have thought the order would be

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

What am I mssing here?


it makes no difference, the onload is set for when the image loads and as
you know this takes a few seconds. so the image will be loading and will
call the function AFTER it has completed that task, in the meantime the rest
of the code is free to execute...is set the source ect.
Sep 19 '05 #28

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:v3********************************@4ax.com...
On Sun, 18 Sep 2005 23:23:59 +0100, "Richard Cornford"
<Ri*****@litotes.demon.co.uk> wrote:
You will notice that having this explained does you little good as you
don't have the grounding in javascript needed to understand what it
means, or its implications.
Richard,

You have certainly failed to clarify the postion for me


which is frustrating as the explanation was a comprehensive one.
- but then I
suspect that you were just trying to make a point! I have a background in science education and I always remember the
words of Sir Lawrence Bragg that a really good scientist can make even
the most complex theory comprehensible. Just a matter of how you go
about it.


Well unfortuntly programming in any language requires a basic understanding
of how the language is constructed and works.

Please take some time to do some research. Try www.w3schools.com and just
go throug hthe tutorial, will take an hour but will save some time.
Sep 19 '05 #29

P: n/a
On Mon, 19 Sep 2005 09:11:41 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
You have certainly failed to clarify the postion for me


which is frustrating as the explanation was a comprehensive one.


Come off it Zoe! THis explanation was hidden by jargon! Just look at
Rob's explanation - that I could understand. Cann't you see the
difference?!

Geoff


Sep 19 '05 #30

P: n/a
On Mon, 19 Sep 2005 09:04:45 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
picture[ig].onload = preload_imgs;


I have said what this code does !!!

it create a call to the preload_imgs function when the currently loaded
image loads.


Zoe,

Yes but you haven't said what the difference is between

picture[ig].onload = preload_imgs;

and
picture[ig].onload = preload_imgs();


Cheers

Geoff
Sep 19 '05 #31

P: n/a
On Mon, 19 Sep 2005 09:06:59 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
The assigning of the src attribute for the first picture comes after
calling the function again - at least it appears so above. I would
have thought the order would be

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

What am I mssing here?


it makes no difference, the onload is set for when the image loads and as
you know this takes a few seconds. so the image will be loading and will
call the function AFTER it has completed that task, in the meantime the rest
of the code is free to execute...is set the source ect.


OK thanks Zoe

Cheers

Geoff

Sep 19 '05 #32

P: n/a

"Geoff Cox" <ge*******@notquitecorrectfreeuk.com> wrote in message
news:6m********************************@4ax.com...
On Mon, 19 Sep 2005 09:04:45 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
picture[ig].onload = preload_imgs;


I have said what this code does !!!

it create a call to the preload_imgs function when the currently loaded
image loads.


Zoe,

Yes but you haven't said what the difference is between

picture[ig].onload = preload_imgs;

and
picture[ig].onload = preload_imgs();


to be fair that is not the question that I answered because you had not
asked it !!!
Sep 19 '05 #33

P: n/a
On Mon, 19 Sep 2005 09:25:33 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
Yes but you haven't said what the difference is between

picture[ig].onload = preload_imgs;

and
picture[ig].onload = preload_imgs();


to be fair that is not the question that I answered because you had not
asked it !!!


Zoe,

I did ask it but I guess it was in a different message! Sorry.

OK - so what is the difference?!

Cheers

Geoff
Sep 19 '05 #34

P: n/a
Geoff Cox wrote in message news:cu********************************@4ax.com...
On Mon, 19 Sep 2005 09:25:33 GMT, Zoe Brown wrote:
Yes but you haven't said what the difference is between

picture[ig].onload = preload_imgs;

and

> picture[ig].onload = preload_imgs();


to be fair that is not the question that I answered because you had not
asked it !!!


Zoe,

I did ask it but I guess it was in a different message! Sorry.

OK - so what is the difference?!


I would suggest reading, re-reading and analyzing the following message:
news:lv*****************@news.optus.net.au

it is explained pretty well by RobG I would say.
Both, RobG and Stephen Chalmers give their thoughts about it
explaining the difference.

oh, or http://tinyurl.com/clp9j and read the other two messages following it :)

HTH
Sep 19 '05 #35

P: n/a

Geoff Cox wrote:
On Mon, 19 Sep 2005 09:04:45 GMT, "Zoe Brown"
<zo***********@N-O-S-P-A-A-Mtesco.net> wrote:
picture[ig].onload = preload_imgs;


I have said what this code does !!!

it create a call to the preload_imgs function when the currently loaded
image loads.


Zoe,

Yes but you haven't said what the difference is between

picture[ig].onload = preload_imgs;

and
picture[ig].onload = preload_imgs();


Cheers

Geoff


Geoff,

The difference is the following:

1. picture[ig].onload = preload_imgs;
This statement assigns the function to the onload event.

2. picture[ig].onload = preload_imgs();
This statement assigns the return value of the function call to the
onload event.

Sep 20 '05 #36

P: n/a
Robi wrote in message news:ep********************@trueband.net...
Geoff Cox wrote in message news:cu********************************@4ax.com...
On Mon, 19 Sep 2005 09:25:33 GMT, Zoe Brown wrote:
Yes but you haven't said what the difference is between

picture[ig].onload = preload_imgs;

and

>> picture[ig].onload = preload_imgs();

to be fair that is not the question that I answered because you had not
asked it !!!


Zoe,

I did ask it but I guess it was in a different message! Sorry.

OK - so what is the difference?!


I would suggest reading, re-reading and analyzing the following message:
news:lv*****************@news.optus.net.au


oops!!!

news:dg*******************@news.demon.co.uk
or
http://groups.google.com/group/comp....14707df441116b

Sorry, Richard Cornford explains it...

mea maxima culpa
Sep 20 '05 #37

P: n/a
On 19 Sep 2005 17:49:20 -0700, "web.dev" <we********@gmail.com> wrote:

The difference is the following:

1. picture[ig].onload = preload_imgs;
This statement assigns the function to the onload event.

2. picture[ig].onload = preload_imgs();
This statement assigns the return value of the function call to the
onload event.


Got it ! Thanks web dev and my thanks to all others involved

Geoff

Sep 20 '05 #38

P: n/a
Geoff Cox wrote:
Zoe Brown wrote:
You have certainly failed to clarify the postion for me
which is frustrating as the explanation was a
comprehensive one.


Come off it Zoe! THis explanation was hidden by jargon!


That "jargon" being:-

assigns and assigned
called and call
reference and referred
function and function object
property
value
object
array element
return value

-?

The problem with your describing my explanation as being "hidden" by
this "jargon" is that the terms used are probably the simples, and
certainly the most appropriate, terms for the concepts that they
describe. And they describe concepts that are fundamental to javascript.
Just look at Rob's explanation - that I could
understand. Cann't you see the difference?!


RobG's final contribution to this thread is dated Mon, 19 Sep 2005
02:37:05 GMT, and you re-asked for an explanation of the code I
explained at Mon, 19 Sep 2005 09:24:10 GMT, about 7 hours later, which
suggests that his explanation of this code was not any more informative
than mine was. Of course RogG did not explain this code so your drawing
a comparison is somewhat strange. You will also find that if he
explained that code he would use very similar terminology to that I
used.

And the explanation that you received from web dev is incomplete in a
way that could result in misconceptions if taken in isolation (and still
uses a significant proportion of the "jargon" terminology that I used).

Richard.
Sep 21 '05 #39

P: n/a
Geoff Cox wrote:
Richard Cornford wrote:
You will notice that having this explained does you little good
as you don't have the grounding in javascript needed to
understand what it means, or its implications.
Richard,

You have certainly failed to clarify the postion for me - but
then I suspect that you were just trying to make a point!


No, I was trying to make a point, but my explanation was correct, and
about as complete as it could be without getting into the specified
algorithms for the operations.
I have a background in science education and I always remember
the words of Sir Lawrence Bragg that a really good scientist
can make even the most complex theory comprehensible. Just a
matter of how you go about it.


There is a difference between an explanation that can be comprehended
and an explanation that anyone can comprehend. Would Sir Lawrence Bragg
have been able to compose an explanation of General Relativity such that
my 4 year old niece would understand it, or even perceive it as
something other than a rather dull fairly tail?

Science, like most other subjects, requires a certain grounding, and the
acquisition of a vocabulary, if it is gong to be talked about at all.

Richard.
Sep 21 '05 #40

P: n/a
On Wed, 21 Sep 2005 01:26:29 +0100, "Richard Cornford"
<Ri*****@litotes.demon.co.uk> wrote:
Geoff Cox wrote:
Richard Cornford wrote:
You will notice that having this explained does you little good
as you don't have the grounding in javascript needed to
understand what it means, or its implications.


Richard,

I'm sorry if I went a little OTT. No doubt your description was
concise and correct.

All I was trying to say was that I found Rob's longer account easy to
follow.

I do agree I need to make the effort to understand more of how
Javascript works, so thanks for your comments.

Cheers

Geoff
Sep 21 '05 #41

This discussion thread is closed

Replies have been disabled for this discussion.