Refresh Image PHP and Javascript

Question

I am using a Comet, Realtime engine called APE, and I am using jQuery to refresh a PHP image. Initially I load the image like this:

<div id="container">
<img src="image.php" style='background: url(../assets/load.gif) no-repeat center center;margin-left:42px;' alt=' Loading ...' width="500px" height="300px" />
</div>

And then when I receive an event I do this:

$("#container").empty();
$("#container").html('<img src="image.php?device='+device+'" style="background: url(../assets/load.gif) no-repeat center center;margin-left:42px;" width="500px" height="300px" alt=" Loading ..."/>');

device is a var that I receive from the event, so for example I get device1, everything works ok (the image is actually a Chart) and the title changes to "device1" and it plots the last 5 minutes

However, my problem is every single time I receive an event, after this initial one, the date remains at the same five minute period. My device is the same each time, but inside my script I calculate the time epoch 5 minutes ago to the current time, but this script doesn't seem to update the image. Is it being cached or something?

I have tried using this at the top of the page:

<?php
header("Cache-Control: no-cache, must-revalidate");
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
?>

I can wait about 10 minutes, send an event, but the time period is still from the initial load, I thought that the "empty()" would clear the container out, reload the image and therefore rerun the script. Any advice would help!

Thanks

Shad · Accepted Answer · 2012-02-19 06:50:59Z

7

A common approach is to add a trivial var to the query string that holds a unix timestamp; The browser sees each call as a call to a unique image. e.g.

'image.php?device=' + device + '&t=' + Math.round((new Date()).getTime() / 1000);

So that it doesn't think it has a cached image. ( though it will continue whatever cache policy lead to this issue )

edited Feb 19, 2012 at 6:50

answered Mar 1, 2011 at 4:54

Shad

15.5k2 gold badges24 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Doug Molineux Over a year ago

Thank you! I think this one probably makes the most sense

Capsule Over a year ago

Note that this method doesn't prevent caching but on the contrary fills the client cache with as many versions as he reloads the page. It might be OK but it's important to remind it ;-)

Zoidberg · Accepted Answer · 2011-03-01 04:54:51Z

2

Add an extra random variable onto the image path.

$("#container").html('<img src="image.php?device='+device+'&rand='+(math.random * 1000000)+'" style="background: url(../assets/load.gif) no-repeat center center;margin-left:42px;" width="500px" height="300px" alt=" Loading ..."/>');

That will make it appear like a different URL and cause the browser not to cache. This is the same tactic used by YUI.

answered Mar 1, 2011 at 4:54

Zoidberg

10.4k2 gold badges34 silver badges53 bronze badges

Collectives™ on Stack Overflow

Refresh Image PHP and Javascript

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related