starting again! why fails?

G

Geoff Cox

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

Stephen Chalmers

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?!
Click to expand...
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}
Click to expand...

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

What do you consider this line to do?
 
G

Geoff Cox

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

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

What do you consider this line to do?
Click to expand...

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
 
L

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

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

Lee

Lee said:
That's a pretty lousy way to "pre" load images.
Click to expand...

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

Geoff Cox

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

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
 
G

Geoff Cox

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

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
 
L

Lee

Geoff Cox said:
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!
Click to expand...

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

Lee

Geoff Cox said:
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";
}
Click to expand...

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

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

Geoff Cox

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

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
 
L

Lee

Geoff Cox said:
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?
Click to expand...

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

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

Geoff Cox

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

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
 
G

Geoff Cox

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

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
 
R

Richard Cornford

Geoff Cox wrote:
So far no one has made clear to me how the first image
is available more quickly with this code
Click to expand...

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

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

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

RobG

Geoff said:
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";
}
Click to expand...
Click to expand...

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

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

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

Stephen Chalmers

Geoff Cox said:
function preload_imgs()
{
if(ig < ig_max)
{
picture[ig] = new Image();
picture[ig].onload = preload_imgs;
picture[ig].src = "pic" + ig + ".jpg";
ig++;
}
}
Click to expand...

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

What do you consider this line to do?
Click to expand...

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!
Click to expand...
document.getElementById('picture').src = window["picture"][1].src;
Click to expand...

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

Stephen Chalmers

RobG said:
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();
Click to expand...

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

RobG

Stephen said:
RobG said:
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();
Click to expand...

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

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

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-US:official&oi=defmore&q=define:Recursion>

[...]
 
G

Geoff Cox

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

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
 
G

Geoff Cox

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

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
 

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

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
how does this function work? 16
How to have two html audio players on one page? 0
Javascript DOM 1
Help with Visual Lightbox: Scripts 2
Sort by number of characters 1
Only one table shows up with the information 2
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

No members online now.
Total: 29 (members: 1, guests: 28)
Robots: 354

Forum statistics

Threads
473,769
Messages
2,569,582
Members
45,060
Latest member
BuyKetozenseACV

Latest Threads

Top