[JS] Refresh image if changed

[Ellie]

I'm stuck on this one.

The website (Javascript and PHP) I'm making is essentially based around an image that people are editing (via the server). So the image changes every now and then.

I want the browser to reload the image if it's been changed since it was first loaded. How would I do this? Is there a way?

Basically instead of reloading the page every few seconds, I want it to perform some kind of check to see if there is a new version of the image, if so load it, if not do nothing.

 

[Perihelion]

I don't know anything about PHP, but I assume it works with Ajax. I'd probably have the server save the timestamp or version number of the last edit or something and constantly check it through an Ajax call on the client side. Then you check if the local version is outdated and pull a new one from the server if so.

 

[coyotecraft]

The only thing I can think of is have a version# or a timestamp to compare with. So if it changes it'll reload the new image.

 

[Ellie]

Cool, that makes sense. Yeah I'll be using Ajax.

Do you think it's going to be a lot of strain checking a string in a text file every second or so?

 

[Perihelion]

I think this is how this sort of thing is usually done, so I assume it's fine. I don't know of any way to have the server notify the client in JS.

 

[Drago del Fato]

It will be a strain if you have a lot of active users asking for data each second. Solution to this is long pooling - check this model:

Comet [Programming]

 

[Perihelion]

Ah, yeah, good point. I figured there was probably something like that in existence but didn't know how much trouble he wanted to go to with installing things. That's probably a much better option, though.