0

I have an internet radio station and I need a script that will display a picture of the current song in a particular dvi with an id. The image is automatically uploaded via ftp to the server each time the song changes..

HTML:

<div id="auto"></div>

JS: 

  $ (document).ready(function() {
    $('#auto').html('<img src="artwork.png"></img>');
    refresh();
  });

  function refresh() {
    setTimeout (function() {
      $('#auto').html('<img src="artwork.png"></img>');
      refresh();
    }, 1000);
  }

I tried this, but all I get is that the image is loaded, but in case of a change, I have to manually refresh the whole page again..

Mark
  • 206
  • 1
  • 3
  • 13

3 Answers3

1

I'll point out multiple things here.

I think your code is just fine if you are going for the setTimeout recursive calls instead of one setInterval action to repeat it.

File Caching

your problem is probably the browser's cache since you are using the same image name and directory all the time. browsers compare the file name and directory and to decide to load it from its cache or else it will request it from the server. there are different tricks you can do to reload the image from the server in this particular case.

  1. Use different file names/directories for the songs loaded dynamically

  2. Use a randomized GET query (e.g. image.png?v=current timestamp)

Your method for switching

you are replacing the file with FTP, I wouldn't recommend that. maybe you should have all your albums and thumbnails uploaded to the server and use a different dynamic switching for efficiency and less error proneness and will help you achieve method #1 in the previous section better.

Loading with constant refresh

I would like to highlight that if you are using nodeJs or nginx servers - which are event based - you can achieve the same functionality with much less traffic. you don't need a refresh method since those servers can actually send data on specific events to the browser telling it to load a specific resource at that time. no constant refresh is required for this.

You consider your options, I tried to be as comprehensive as I could

CME64
  • 1,673
  • 13
  • 24
1

At the top level, browser cache the image based on its absolute URL. You may add extra query to the url to trick browser that is another new image. In this case, new URL of artist.png will be artist.png?timestamp=123

Check this out for the refresh():

function refresh() {
  setTimeout (function() {
      var timestamp = new Date().getTime();
      // reassign the url to be like artwork.png?timestamp=456784512 based on timestmap
      $('#auto').html('<img src="artwork.png?timestamp='+ timestamp +'"></img>');
        refresh();
      }, 1000);
  }

You may assign id attribute to the image and change its src url

html

<img id="myArtworkId" src="artwork.png"/>

js in the refresh method

  $('#myArtworkId').attr('src', 'artwork.png?timestamp=' + new Date().getTime());
Ponleu
  • 1,492
  • 12
  • 27
  • this is a good implementation of the second workaround I mentioned in my solution and I suggest using it for the OP if saving time is important since it's easy to apply. – CME64 Mar 10 '19 at 09:56
0

You can use window.setInterval() to call a method every x seconds and clearInterval() to stop calling that method. View this answer for more information on this.

// Array containing src for demo
$srcs = ['https://www.petmd.com/sites/default/files/Acute-Dog-Diarrhea-47066074.jpg',
    'https://www.catster.com/wp-content/uploads/2018/05/Sad-cat-black-and-white-looking-out-the-window.jpg',
    'https://img.buzzfeed.com/buzzfeed-static/static/2017-05/17/13/asset/buzzfeed-prod-fastlane-03/sub-buzz-25320-1495040572-8.jpg?downsize=700:*&output-format=auto&output-quality=auto'
]
$i = 0;

$(document).ready(function() {
    $('#auto').html('<img src="https://images.pexels.com/photos/617278/pexels-photo-617278.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500"></img>');

    // call method after every 2 seconds
    window.setInterval(function() {
        refresh();
    }, 2000);

    // To stop the calling of refresh method uncomment the line below
    //clearInterval() 

});



function refresh() {
    $('#auto').html('<img src="' + $srcs[$i++] + '"></img>');

    // Handling of index out of bound exception
    if ($srcs.length == $i) {
        $i = 0;
    }

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="auto"></div>
Javapocalypse
  • 2,223
  • 17
  • 23
  • This is an alternative to `setTimeout`, but it doesn't seem to explain why the OP's code isn't working as expected. – showdev Mar 10 '19 at 08:11
  • this is actually the first workaround mentioned in my solution since you are using different links called in succession and it should work but doesn't explain the reason. also it's not synced with the playing music or loaded dynamically and that's another issue. notes: you could use `$i = $i%$srcs.length` to avoid the index bounds, you can also use `$i++%$srcs.length` in the index call but the `$i` will just keep growing until it hits the max size of an integer which may not happen in one session probably but it's a bad idea with less code. – CME64 Mar 10 '19 at 09:52