starting again! why fails?

[Geoff Cox]

Re: starting again! why fails?

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

[color=blue]
>ARRRRRRRRRRGGG GGGGGGGGGHHHHHH HHH !!
>
>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 !!!!!![/color]

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

[Zoe Brown]

Re: starting again! why fails?


"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:demri11c76 pm4o10bdc97ajl7 v131kthdp@4ax.c om...[color=blue]
> On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
> <zoenaomibrown@ N-O-S-P-A-A-Mtesco.net> wrote:
>
>[color=green]
>>ARRRRRRRRRRGG GGGGGGGGGGHHHHH HHHH !!
>>
>>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 !!!!!![/color]
>
> 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?![/color]

Which version is this for ?
[color=blue]
>
> 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?[/color]

i dont know off hand, probably temporay internet files but you could try
searching the interenet for an answer...

[Geoff Cox]

Re: starting again! why fails?

On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
<zoenaomibrown@ N-O-S-P-A-A-Mtesco.net> wrote:
[color=blue][color=green]
>> 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()[/color][/color]

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

[Richard Cornford]

Re: starting again! why fails?

Geoff Cox wrote:
<snip>[color=blue]
> So far no one has made clear to me how the first image
> is available more quickly with this code[/color]

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.
[color=blue]
> and what
>
> picture[ig].onload = preload_imgs;
>
> does.[/color]

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.
[color=blue]
> Stephane made the point that it must be " = preload_imgs"
> and not "preload_imgs() " - what difference does the lack
> of () make?[/color]

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.

[RobG]

Re: starting again! why fails?

Geoff Cox wrote:[color=blue]
> On 18 Sep 2005 10:06:23 -0700, Lee <REM0VElbspamtr ap@cox.net> wrote:
>
>
>[color=green]
>>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";
>> }[/color][/color]

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.

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

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

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#ad ef-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

[Stephen Chalmers]

Re: starting again! why fails?

Geoff Cox <geoff.cox@notq uitecorrectfree uk.com> wrote in message news:qr1ri1ll1i qrfvq3dpgsbehas b9b1036iv@4ax.c om...[color=blue]
> On Sat, 17 Sep 2005 23:51:02 +0100, "Stephen Chalmers"
> <ignoring@lycos .co.uk> wrote:
>[color=green][color=darkred]
> >> function preload_imgs()
> >> {
> >> if(ig < ig_max)
> >> {
> >> picture[ig] = new Image();
> >> picture[ig].onload = preload_imgs;
> >> picture[ig].src = "pic" + ig + ".jpg";
> >> ig++;
> >> }
> >> }
> >>[/color]
> >
> >Your code appends only one element to the empty array 'picture'. Change 'if' to 'while'.
> >[color=darkred]
> >> picture[ig].onload = preload_imgs;[/color]
> >
> >What do you consider this line to do?[/color]
>
> 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!
>[/color]
[color=blue]
>document.getEl ementById('pict ure').src = window["picture"][1].src;[/color]

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.

[Stephen Chalmers]

Re: starting again! why fails?

RobG <rgqld@iinet.ne t.au> wrote in message news:U6nXe.511$ uQ6.26120@news. optus.net.au...[color=blue][color=green]
> > 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();[/color]
>
> 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.
>[/color]
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.

[RobG]

Re: starting again! why fails?

Stephen Chalmers wrote:[color=blue]
> RobG <rgqld@iinet.ne t.au> wrote in message news:U6nXe.511$ uQ6.26120@news. optus.net.au...
>[color=green][color=darkred]
>>> 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 ();[/color]
>>
>>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.
>>[/color]
>
> 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.[/color]

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.mozil la:en-US:official&oi= defmore&q=defin e:Recursion>

[...]

--
Rob

[Geoff Cox]

Re: starting again! why fails?

On Sun, 18 Sep 2005 23:23:59 +0100, "Richard Cornford"
<Richard@litote s.demon.co.uk> wrote:
[color=blue]
>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.[/color]

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





[color=blue]
>
>Richard.[/color]

[Geoff Cox]

Re: starting again! why fails?

On Sun, 18 Sep 2005 23:54:28 GMT, RobG <rgqld@iinet.ne t.au> wrote:


Rob,

Many thanks for the explanation. Just one question ...
[color=blue]
>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.[/color]

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









[color=blue]
>
>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[color=green]
> >= ig_max.[/color]
>
>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#ad ef-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>[/color]

[Geoff Cox]

Re: starting again! why fails?

On Sun, 18 Sep 2005 23:54:28 GMT, RobG <rgqld@iinet.ne t.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

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

[Zoe Brown]

Re: starting again! why fails?


"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:o8nri19crp 2omp3elb4n3hoo6 v9kgpqk6p@4ax.c om...[color=blue]
> On Sun, 18 Sep 2005 21:09:51 GMT, "Zoe Brown"
> <zoenaomibrown@ N-O-S-P-A-A-Mtesco.net> wrote:
>[color=green][color=darkred]
>>> 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()[/color][/color]
>
> 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;[/color]

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.

[Zoe Brown]

Re: starting again! why fails?


"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:dfpsi1dquu lvu628l0e96khso b748838ir@4ax.c om...[color=blue]
> On Sun, 18 Sep 2005 23:54:28 GMT, RobG <rgqld@iinet.ne t.au> wrote:
>
>
> Rob,
>
> Many thanks for the explanation. Just one question ...
>[color=green]
>>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.[/color]
>
> 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?[/color]

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.

[Zoe Brown]

Re: starting again! why fails?


"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:v3psi11ija h9nvlv3qfes2otq spb9tiaoi@4ax.c om...[color=blue]
> On Sun, 18 Sep 2005 23:23:59 +0100, "Richard Cornford"
> <Richard@litote s.demon.co.uk> wrote:
>[color=green]
>>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.[/color]
>
> Richard,
>
> You have certainly failed to clarify the postion for me[/color]

which is frustrating as the explanation was a comprehensive one.
[color=blue]
> - but then I
> suspect that you were just trying to make a point![/color]
[color=blue]
> 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.[/color]

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.

[Geoff Cox]

Re: starting again! why fails?

On Mon, 19 Sep 2005 09:11:41 GMT, "Zoe Brown"
<zoenaomibrown@ N-O-S-P-A-A-Mtesco.net> wrote:
[color=blue][color=green]
>> You have certainly failed to clarify the postion for me[/color]
>
>which is frustrating as the explanation was a comprehensive one.[/color]

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