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
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions

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

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

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

Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

770 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