How to 'buffer' image that is being updated every 3 seconds?

Posted on 2003-02-25
Medium Priority
Last Modified: 2008-01-09
Hello Everyone,

I am very new to any of this so please bear with me.  I have created a web page that refreshes a large image every 3 seconds using JavaScript (see code below).  I did it this way (rather than use meta refresh tags) to ensure that the web page didn't move to the top everytime the image was refreshed.

A new image is being produced every 2 seconds by a Visual Basic program,and overwriting the old image with the same name (iis.jpg, in this case).  However, using the code below as is, as the image is being written to the computer, the web page has nothing to load!  

Does anyone know how I can 'buffer' the current image, or just not refresh it, until the new image has been saved?  Can I even do this with just JavaScript?




<body onload="startClock()">
<script language="JavaScript"><!--
var speed = 3;
var y = 1;
var x = speed + y;
var time = x - y;
var now;
campicture = new Image();

function stopClock()
x = "off";
document.form0.clock.value = x;

function startClock() {
if (x != "off")
x = x - y;
document.form0.clock.value = x;
if (x <= 1)
timerID = setTimeout("startClock()", 1000);

function reload()
now = new Date();
var camImg = "IIS.jpg" + "?" + now.getTime();
document.campicture.src = camImg;
x = speed;
document.form0.clock.value = x;

<form action="refresh3.htm" name="form0">

<img src="iis.jpg" border="0" width="1024" height="1024" name="campicture" reload="60"></a>
   <div align="center"><center><p>Image will reload in <input type="text" size="3" name="clock"> seconds.</p></center></div>


Question by:birdy_carolyn

Expert Comment

ID: 8020975

I tried this not too long ago but was unsuccessful.  The problem is that the browser doesnt recognize that the image is different from the version stored in cache.  I even tried to reload the entire page and that didnt work.  You may have better luck.  In any event, to buffer the image:

var myImg = new Image();
myImg.src = "IIS.jpg";

good luck,

Accepted Solution

Azmeen earned 225 total points
ID: 8022354
<SCRIPT LANGUAGE="Javascript"><!--
function refreshpic2(){
rfsh = new Date() ; rfsh = "?"+rfsh.getTime()
document.images["thepic"].src = "IIS.jpg"+rfsh
setTimeout("refreshpic2()", 2000) // 2secs

<IMG NAME="thepic" SRC="IIS.jpg" alt="" WIDTH="1024" HEIGHT="1024" BORDER="0">
Image Refreshes Every 2 Secs

<SCRIPT LANGUAGE="Javascript"><!--
if( document.images ) // If browser support it...
refreshpic2(); // ...start refresher

Assisted Solution

cdillon earned 225 total points
ID: 8022434
I would use two images iis.jpg and iis2.jpg.  Have your javascript reload the iis2.jpg image and have the vb script copy the image from iis.jpg to iis2.jpg.  That way the full picture is always there.
LVL 53

Expert Comment

ID: 9350260
This question has been classified abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.

Unless it is clear to me that the question has been answered I will recommend delete.  It is possible that a Grade less than A will be given if no expert makes a case for an A grade. It is assumed that any participant not responding to this request is no longer interested in its final disposition.

If the user does not know how to close the question, the options are here:



Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
Explain concepts important to validation of email addresses with regular expressions. Applies to most languages/tools that uses regular expressions. Consider email address RFCs: Look at HTML5 form input element (with type=email) regex pattern: T…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month9 days, 23 hours left to enroll

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question