Refreshing multiple images

.net , javascript Cambridge, United Kingdom
  • 13 years ago
    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 need to 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

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

  • 13 years ago
    It is often easier to get the images you want replaced or refreshed by giving the image tags a name and access directly or via the getElementById method and give the image property 'src' the name of the image.

    Ste timeout is always a bad move where you need a regular update interval... use  the  setInterval to create a timer that is called at regular intervals.


Post a reply

Enter your message below

Sign in or Join us (it's free).


Why not write for us? Or you could submit an event or a user group in your area. Alternatively just tell us what you think!

Our tools

We've got automatic conversion tools to convert C# to VB.NET, VB.NET to C#. Also you can compress javascript and compress css and generate sql connection strings.

“You can stand on the shoulders of giants OR a big enough pile of dwarfs, works either way.”