starting again! why fails?

**Stephen Chalmers** · Sep 17 '05, 11:05 PM

Re: starting again! why fails?

Geoff Cox <geoff.cox@notq uitecorrectfree uk.com> wrote in message news:hqqoi1d8lo l5o49p4i3n4b6fk bspr2rd2j@4ax.c om...[color=blue]
> Hello,
>
> The following code works with
>
> document.getEle mentById('pictu re').src = window["picture"][0].src;
>
> but not if I increase the index to 1, ie
>
> document.getEle mentById('pictu re').src = window["picture"][1].src;
>
> Why is this?!
>[/color]
[color=blue]
>
> 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=blue]
> picture[ig].onload = preload_imgs;[/color]

What do you consider this line to do?

--
S.C.

**Geoff Cox** · Sep 18 '05, 03:45 PM

Re: starting again! why fails?

On Sat, 17 Sep 2005 23:51:02 +0100, "Stephen Chalmers"
<ignoring@lycos .co.uk> wrote:
[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++;
>> }
>> }
>>[/color]
>
>Your code appends only one element to the empty array 'picture'. Change 'if' to 'while'.
>[color=green]
>> 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!

Cheers

Geoff

**Lee** · Sep 18 '05, 05:35 PM

Re: starting again! why fails?

Geoff Cox said:[color=blue]
>
>Hello,
>
>The following code works with
>
>document.getEl ementById('pict ure').src = window["picture"][0].src;
>
>but not if I increase the index to 1, ie
>
>document.getEl ementById('pict ure').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.cs s" 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() ;[/color]

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";
}

**Zoe Brown** · Sep 18 '05, 05:55 PM

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]

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

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.

**Lee** · Sep 18 '05, 05:55 PM

Re: starting again! why fails?

Lee said:
[color=blue]
>That's a pretty lousy way to "pre" load images.[/color]

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.

**Geoff Cox** · Sep 18 '05, 06:05 PM

Re: starting again! why fails?

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

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

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

**Geoff Cox** · Sep 18 '05, 06:05 PM

Re: starting again! why fails?

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

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

**Lee** · Sep 18 '05, 06:35 PM

Re: starting again! why fails?

Geoff Cox said:[color=blue]
>
>On Sun, 18 Sep 2005 17:46:20 GMT, "Zoe Brown"
><zoenaomibrown @N-O-S-P-A-A-Mtesco.net> wrote:
>[color=green]
>>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.[/color]
>
>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![/color]

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

**Lee** · Sep 18 '05, 06:35 PM

Re: starting again! why fails?

Geoff Cox said:[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]
>
>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[/color]

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?

**Zoe Brown** · Sep 18 '05, 06:45 PM

Re: starting again! why fails?

"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:pv9ri1da4j 7e7rvaphooaitet q7p8drod3@4ax.c om...[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]
>
> 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?[/color]

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 ?

**Zoe Brown** · Sep 18 '05, 06:55 PM

Re: starting again! why fails?

"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:59ari1544u 11faeocq3pf1nia e946u70cf@4ax.c om...[color=blue]
> On Sun, 18 Sep 2005 17:46:20 GMT, "Zoe Brown"
> <zoenaomibrown@ N-O-S-P-A-A-Mtesco.net> wrote:
>[color=green]
>>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.[/color]
>
> Zoe,
>
> I would indeed like to undertand Stephane's code[/color]

What javascript references are you using ?

You should be able to lookup what

picture[ig].onload = preload_imgs;

might do !

**Geoff Cox** · Sep 18 '05, 08:25 PM

Re: starting again! why fails?

On 18 Sep 2005 11:12:25 -0700, Lee <REM0VElbspamtr ap@cox.net> wrote:
[color=blue][color=green]
>>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[/color]
>
>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?[/color]

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

**Lee** · Sep 18 '05, 09:05 PM

Re: starting again! why fails?

Geoff Cox said:[color=blue]
>
>On 18 Sep 2005 11:12:25 -0700, Lee <REM0VElbspamtr ap@cox.net> wrote:
>[color=green][color=darkred]
>>>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[/color]
>>
>>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?[/color]
>
>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.[/color]

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.

**Zoe Brown** · Sep 18 '05, 09:15 PM

Re: starting again! why fails?

"Geoff Cox" <geoff.cox@notq uitecorrectfree uk.com> wrote in message
news:u4hri1hist nleti4t6rl4lah3 m0o1u6nri@4ax.c om...[color=blue]
> On 18 Sep 2005 11:12:25 -0700, Lee <REM0VElbspamtr ap@cox.net> wrote:
>[color=green][color=darkred]
>>>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[/color]
>>
>>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?[/color]
>
> 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 ...[/color]

ARRRRRRRRRRGGGG GGGGGGGGHHHHHHH HH !!

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 ?

starting again! why fails?

starting again! why fails?

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment