Question

在我的domotica脚本中，我使用了一个API，用于＆＃34; buienradar＆＃34; 它将加载到页面中，但不会刷新每个＆＃34; x＆＃34;时间。因此API将保留在页面中第一次加载的循环上。

如何使用来自互联网/ API的新信息更改我的每小时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

图片缓存

浏览器倾向于忽略文档图像上的缓存控制和过期标头。请参阅前面的问题＆＃34; Why don't browsers respect cache control hearders for images loaded with new Image()＆＃34;和＆＃34; Refresh image with a new one at the same URL＆＃34 ;.遗憾的是，这种做法在HTML standard中受到保护，无法通过脚本控制它。

在这个问题中，服务器上的雷达图像在修改后的缓存到期时间为60秒，但图像内容在静止状态下显示5分钟（？）。以下是缓存过期标头的示例：

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

图像缓存在内存和磁盘上。读取过期资源的响应标头会使磁盘高速缓存失效，并且在URL上使用散列组件（以＆＃34开头;＃＆＃34;）会使内存高速缓存无效。 Chrome很高兴只是使磁盘缓存无效，但Firefox也要求散列标签使其内存缓存无效。使用两者都可以在两种浏览器中更新雷达图像：

$(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
});

请注意

readHeaders设置一个计时器，在一小时内当前5分钟间隔结束后的一到两分钟内自行调用。通过在计算中包含秒数可以使这更加精确，或者更改为更频繁地更新图像。
如果在服务器上的图像更新和5分钟间隔（加上一两分钟）结束之间加载页面，则第一次更新将显示相同的图像。第二次更新应加载不同的GIF。
图像的HTTP请求是使用其发布的URL进行的，无需其他查询参数。

API Buienradar每x次更新一次

1 个答案: