Refresh browser when div contents changed

Question

within the <div> I embedded an <img>, sometimes I have the problem that the browser didn't reload when new img came. So I refresh the browser within a specific time intervall. But how can I force the browser automatically refresh, when <div> contents changed? I use Internet Explorer and don't want to use Ajax or Jquery. It would be great if we find a solution in Javascript or Html only.

<body onload="JavaScript:AutoRefresh(5000);">

then in <script> section I set to window.location.reload(1)

For this solution is not user-friendly.

Hope you find a better solution.

Can you elaborate on your problem? When you embed what? an img? and how should a new image then come? You mean when a new image is added on the server and it should be displayed automatically on the page? — cloned, Sep 10 '20 at 07:02
I embed an , it changed after 10 minutes, when variable is set to 0. — teddy1995, Sep 10 '20 at 07:15

score 2 · Accepted Answer · edited Sep 10 '20 at 08:50

2

Try on change of Image?

<img src="./img.src" onchange="javascript:window.location.reload();"

edited Sep 10 '20 at 08:50

k.vincent

3,743
8
37
74

answered Sep 10 '20 at 07:41

pl2ern4

340
2
10

Bence Szalai · Answer 2 · 2020-09-10T08:12:25.733

Looks like this means you are changing the image on the webserver, and want the browser to automatically reload. But the problem is that the browser would not know when the image has changed, unless you reload.

You can use a http request to poll the server.

It is not clear what way the image is updated, but I'd do this:

any time the image is changed put the hash or last update timestamp under a URL on my server
use XMLHttpRequest (e.g.: https://stackoverflow.com/a/4033310/ ) to poll the hash/timestamp from the server every x seconds or minutes
compare the received data with the last known value
reload the page if it is different

This way the page would only reload, when the image has changed.

Refresh browser when div contents changed

2 Answers2