How to refresh DIV with AJAX when image is replaced?

Question

I have a online radio station and i wanted to show a album image for every song.Since I have the ability to automatically upload an image of a current playing song (artwork.png) to a web server via ftp, i made a script to display the image on html page..

My Code:

<div id="auto">
  <img id="artwork" src="artwork.png"></img>
</div>

function refresh() {
  setTimeout (function() {
    var timestamp = new Date().getTime();
    $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');

    refresh();
  }, 1000);
}

$('#artwork').attr('src', 'artwork.png?timestamp=' + new Date().getTime());

Everything works great except auto refresh, so i have to manually refresh the page to load a new replaced image. But i want whenever a new image is uploaded to do one refresh on div and that's it. Where is the problem here with refresh();

Abhishek Pandey · Accepted Answer · 2019-11-23T09:33:36.703

1

First on all, the method refresh() wasn't invoked anywhere in your snippet, so you need to call it first.

Second, it's best practice to use setInterval Instead of setTimeout

There is no need to recall refresh() method in setTimeout as it will re attach setTimeout method every time it calls it-self, although it doesn't harm you programmer but if you want to call a piece of program every second then you should go for setInterval

Also I have bit simplified your code.

function refresh() {
  setInterval(function() {
    var timestamp = new Date().getTime();
    var newImage = 'https://picsum.photos/200?timestamp=' + new Date().getTime();
    $('#artwork').attr('src', newImage);
  }, 2000);
}
refresh();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="auto">
  <img id="artwork" src="https://picsum.photos/200">
</div>

edited Nov 23 '19 at 09:33

answered Nov 23 '19 at 09:10

Abhishek Pandey

13,302
8
38
68

So OP will have 2 intervals after 5 seconds, 4 intervals after 10 seconds, 8 intervals after 15 seconds, 16 intervals after 20 seconds, ... - Why should this be useful? – Andreas Nov 23 '19 at 09:14
@Andreas yeah, thank you, I was already editing my answer for the same – Abhishek Pandey Nov 23 '19 at 09:18
There's still no real reason for `setInterval`. `refresh()` calling itself with `setTimeout` does the same as your `setInterval` version. – Andreas Nov 23 '19 at 09:21
I know, the problem was the uninvoked function, but as you said calling the same method bind setTimeout many times, so it's better practice is use to interval, that's what interval is made for, right? – Abhishek Pandey Nov 23 '19 at 09:26
_"It's best practice..."_ - No, as it totally depends on the use case: [setTimeout or setInterval?](https://stackoverflow.com/questions/729921/settimeout-or-setinterval) – Andreas Nov 23 '19 at 10:03

Aman Kumar · Answer 2 · 2019-11-23T11:29:17.827

There is issue with your code, you have created refresh() which when called should invoke a function to refresh the image every second, so you should use setInterval() instead. Plus, you never invoked refresh(). So, it won't work, try this:-

<script>
    function refresh() {
        setInterval(function() {
            var timestamp = new Date().getTime();
            $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');
        }, 1000);
    }
    window.addEventListener('load', refresh);
</script>

So, refresh() is defined, and invoked when page is loaded. refresh() then executes the setInterval() which executes the anonymous function every second to update the image. There are other optimizations possible like clearing the interval on page unload and so on, but this will get the job done. Hope it helps!!!

`refresh()`, that starts the interval, calls itself. Maybe you should reconsider your answe — Andreas, Nov 23 '19 at 09:16
Sorry, forgot to remove the refresh() call from initial code snippet — Aman Kumar, Nov 23 '19 at 11:28

score 0 · Answer 3 · answered Nov 23 '19 at 09:22

try your existing code with one more line added to it

function refresh() {
  setTimeout (function() {
    var timestamp = new Date().getTime();
    $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');
    refresh();
  }, 1000);
}
refresh(); // new added line
$('#artwork').attr('src', 'artwork.png?timestamp=' + new Date().getTime());

How to refresh DIV with AJAX when image is replaced?

3 Answers3