API Buienradar update every x time

Question

In my domotica script i work with an API for "buienradar" It will load in the page but will not refresh every "x" time. So the API will stay on the loop that is build on the first load in the page.

How can i change my script that the API refresh every hour with new information from the internet / API?

BR, Jeroen

        <div class="col col-md-3 col-sm-6 col-xs-12">
          <div class="box box-primary">
            <div class="box-header with-border">
              <h3 class="box-title">Buienradar</h3>
            </div><!-- /.box-header -->
            <div class="medium-box-body">
                <img id="radarupdate">
                </img>
            </div>
          </div>
        </div>




<script>
    $(function() { Domotica.dashboard.init(); });   

    $(document).ready(function() {
        $('#radarupdate').attr("src","http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256");
        setInterval(function(){
            $('#radarupdate').attr("src","http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256");

            var html = '<img border="0" src="http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256">';
        },900000);
    });

</script>

Answer 1

Image Caching

Browsers tend to ignore cache control and expiry headers on document images. See previous questions "Why don't browsers respect cache control hearders for images loaded with new Image()" and "Refresh image with a new one at the same URL". Sadly the practice is protected in the HTML standard with no means of controlling it from script.

In this question radar images on the server are given a cache expiry of 60 seconds after modification, but image content appears static for 5 minutes (?). Here is a sample of the cache expiry header:

last-modified Sun, 07 Jan 2018 01:33:46 GMT
expires Sun, 07 Jan 2018 01:34:46 GMT

Images are cached in memory and on disk. Reading the response headers for an expired resource invalidates the disk cache, and using a hash component on the URL (starting with "#") invalidates the memory cache. Chrome is happy with just invalidating the disk cache but Firefox requires the hash tag to invalidate its memory cache as well. Using both got the radar image updated in both browsers:

$(document).ready(function() {
    var radarURL = "http://api.buienradar.nl/image/1.0/RadarMapNL?w=256&h=256";
    var count = 0;

    function readHeaders(){
        $.ajax( radarURL, {
             method: "HEAD",
             success: updateImage
          }
        );
        setTimeout( readHeaders, (6 - new Date().getMinutes()%5) * 60000); // see note
    }

    function updateImage() {
        count +=1;
        var differentURL = radarURL + "#" + count; // change hash component
        $('#radarupdate').attr("src", differentURL);
    }
    readHeaders();  // first time
});

Note

• readHeaders sets a timer to call itself between one and two minutes after the end of the current 5 minute interval in the hour. This could be made more precise by including seconds in the calculation, or altered to update images less frequently.

• If the page is loaded between image update on the server and the end of a 5 minute interval (plus a minute or two), the first update will show the same image. The second update should load a different GIF.

• HTTP requests for the image are made using its published URL without additional query parameters.