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> 40  1834 
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.
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
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";
}
"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.
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.
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
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
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.
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?
"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 ?
"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 !
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
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.
"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 ?
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
"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...
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
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.
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
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.
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.
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
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.
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>
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();
"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.
"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.
"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.
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
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
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
"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 !!!
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
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
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.
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
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
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.
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.
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 This thread has been closed and replies have been disabled. Please start a new discussion. Similar topics
by: serge calderara |
last post by:
Dear all,
I have an application which is suppose to start another executable process.
As soon as that process is running, I need to retrive its handle. The
problem of the particular process I am...
|
by: cedric |
last post by:
hello,
I encounter a problem using threads. I have a simple code to use a thread :
cSurveillanceBorne = New clsThreadSurveillance
_SurveillanceThread = New Thread(AddressOf...
|
by: Gellert, Andre |
last post by:
Hello,
i have a bug in a php application based on postgres 7.2.2 , which cannot
handle oid's greater than
2147483647 .
So I have to reset the used oids to start from 1 again, so that we have more...
|
by: Glenn |
last post by:
I have used this code successfully in a form application.
I tried to add the same code in a service and have not
been able to get the application to start. I have the
service starting with a local...
|
by: Sara T. |
last post by:
I always found that web page written by ASP.NET (VB.NET) generate error when
starting at the first times. If I click refresh button on the IE again, it
can work as well.
What's wrong ?
Again...
|
by: Linda Chen |
last post by:
Hi All,
I have a couple web services developed in my machine.
Starting from this morning, if I started any web service
(no matter I did this from from VS .net IDE or from IE),
my machine was...
|
by: Phil Mc |
last post by:
Say for example you have a application running on a windows 2003 server
(that is on server, not from). This application needs to start child
applications (must be stand alone console applications),...
|
by: cypher543 |
last post by:
This has been driving me insane for the last hour or so. I have search
everywhere, and nothing works. I am trying to use the subprocess module
to run a program and get its output line by line. But,...
|
by: eliasen |
last post by:
Hi
I have created a Windows Service using C# and .NET2.0. The service is
quite simple - right now it doesn't do anything except throwing an
exception in the OnStart method. It used to something...
|
by: PaulaCM |
last post by:
Hello Again Byters (hmmm... that sounded better in my head!)!
Question on Primary Keys / Auto numbering.
I want to make sure that each record has its own individual ID (hence primary key) but,...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: Hystou |
last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
|
by: Oralloy |
last post by:
Hello folks,
I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>".
The problem is that using the GNU compilers,...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |
