J
John Dann
A simple question but an extended post I'm afraid! I need to refine
some JS code to refresh two or more images in a web page at timed but
different intervals, but without refreshing the page as a whole. I can
program - mostly in .Net - but rarely use JS hence this post for
specifically JS advice please.
I've dug out some JS code to do what I need from around the web, but I
want to understand what's going on and also to make the code as simple
and concise as possible. So let me list the code and then maybe I can
ask some questions:
First, I see that it's good practice for JS to refer to an image by a
name, so the HTML that declares the image on the web page has a name
property, eg:
<img border="0" src="image1.gif" name="image1"/>
The actual JS seems to involve two parts: a function block placed in
the header and then a call to the function placed in the onload
attribute of the <body> tag. Let me ask about these two parts
separately.
1. The function definition:
At present I'm using some copied code in the HTML header that says:
<script language="JavaScript">
function refreshIt() {
if (!document.images) return;
document.images['image1'].src = 'image1.gif?' + Math.random();
setTimeout('refreshIt()',60000); // refresh every 60 secs
}
<script>
AIUI the 'if (!document.images) return;' segment is just for
compatibility with older browsers so can presumably stay as is.
Then the Math.random is apparently just a device that happens to cause
a new copy of the image to be downloaded from the server. I guess I
don't need to know why, it's presumably just a handy quirk of JS. But
2 questions on this line of code:
I wondered if it was better JS style these days to say
document.images.image1.src = ... (Is this correct?)
What's the question mark a placeholder for?
Now the setTimeout line. This looks a bit odd to me, referring to the
function within the function itself. But presumably it's correct? (The
60000 is obviously the refresh time - no problem - though why is it
repeated in the body tag attribute - see below?).
2. The body code:
<body onLoad=" setTimeout('refreshIt()',60000)">
I'm not sure exactly what this is doing - presumably it initialises
the refresh cycle. Well I could undertsand what it was doing if the
setTimeout wasn't also included in the function definition - it's the
duplication I'm unclear about.
Finally, as per my introduction, what I really need is a function that
will manage the refreshing of two or more images at different
intervals. So I'm guessing that the function could be written as:
function refreshIt(imagename, refreshinterval) {...
with an appropriate string and long integer for imagename and
refreshinterval respectively. But I'm not sure what the exact syntax
thereafter might be, nor how the argument for the onLoad event in the
body tag would be coded for two or more images.
Any comments etc gratefully received, especially for making the code
as simple and concise as possible.
some JS code to refresh two or more images in a web page at timed but
different intervals, but without refreshing the page as a whole. I can
program - mostly in .Net - but rarely use JS hence this post for
specifically JS advice please.
I've dug out some JS code to do what I need from around the web, but I
want to understand what's going on and also to make the code as simple
and concise as possible. So let me list the code and then maybe I can
ask some questions:
First, I see that it's good practice for JS to refer to an image by a
name, so the HTML that declares the image on the web page has a name
property, eg:
<img border="0" src="image1.gif" name="image1"/>
The actual JS seems to involve two parts: a function block placed in
the header and then a call to the function placed in the onload
attribute of the <body> tag. Let me ask about these two parts
separately.
1. The function definition:
At present I'm using some copied code in the HTML header that says:
<script language="JavaScript">
function refreshIt() {
if (!document.images) return;
document.images['image1'].src = 'image1.gif?' + Math.random();
setTimeout('refreshIt()',60000); // refresh every 60 secs
}
<script>
AIUI the 'if (!document.images) return;' segment is just for
compatibility with older browsers so can presumably stay as is.
Then the Math.random is apparently just a device that happens to cause
a new copy of the image to be downloaded from the server. I guess I
don't need to know why, it's presumably just a handy quirk of JS. But
2 questions on this line of code:
I wondered if it was better JS style these days to say
document.images.image1.src = ... (Is this correct?)
What's the question mark a placeholder for?
Now the setTimeout line. This looks a bit odd to me, referring to the
function within the function itself. But presumably it's correct? (The
60000 is obviously the refresh time - no problem - though why is it
repeated in the body tag attribute - see below?).
2. The body code:
<body onLoad=" setTimeout('refreshIt()',60000)">
I'm not sure exactly what this is doing - presumably it initialises
the refresh cycle. Well I could undertsand what it was doing if the
setTimeout wasn't also included in the function definition - it's the
duplication I'm unclear about.
Finally, as per my introduction, what I really need is a function that
will manage the refreshing of two or more images at different
intervals. So I'm guessing that the function could be written as:
function refreshIt(imagename, refreshinterval) {...
with an appropriate string and long integer for imagename and
refreshinterval respectively. But I'm not sure what the exact syntax
thereafter might be, nor how the argument for the onLoad event in the
body tag would be coded for two or more images.
Any comments etc gratefully received, especially for making the code
as simple and concise as possible.
