示例

Question

我有一个Raspberry Pi每1分钟使用FTP覆盖Web服务器（而不是RPI）上的图像。问题是我的网页上的“刷新”按钮不起作用，因为图像已被缓存。当我的按钮加载网页时，我再次看到了旧图像。

点击CRTL + F5会显示新图像，但是由于我想在智能手机上使用此网页，因此我需要一个更好的解决方案。

我不希望每隔xx秒自动重新加载页面，我想要一个手动执行的按钮。但是如何？

我的网页：

<body>   
    <p style="text-align:center;">
        <A HREF="javascript:history.go(0)">Click to refresh the page</A>
        <img src="CAM2.png" alt="Camera 2" width="100%">
    </p>
</body>

Answer 1

如果您有权访问服务器的配置，则可以将其中的缓存截止时间设置为0分钟。如果您将所有流量都通过例如您还可以在Cloudflare中设置缓存过期时间。另一种选择是为每个图像使用另一个文件名，并在与图像同时更新HTML。不过，与一次设置缓存过期日期相比，需要付出更多的努力。

Answer 2

一个标准的技巧是在图像上附加一个唯一的数字，如图所示。每次加载DOM或页面时，都可以使用Javascript或PHP或其他工具来创建随机数。

<script type='text/javascript'>
    function refresh() {   
        var rand = Math.floor(Math.random() * 10000)
        document.getElementById("imgId").src="CAM2.png?" + rand;
    }
</script>

<body>   
    <p style="text-align:center;">
        <A HREF="#" onclick='refresh()'>Click to refresh the page</A>
        <img src="CAM2.png" id='imgId' alt="Camera 2" width="100%">
    </p>
</body>

以上脚本的作用：

首先生成一个随机数。使用图像源（src）和附加的唯一编号更新唯一的img标签（带有id）。每次单击锚点时数字都会更改。

示例

出于说明目的；下面的示例更改图像url和src字符串。我也整理了一些次要的HTML。

    function refresh() {   
        var rand = Math.floor(Math.random() * 10000);
        var exampleOnly = Math.floor(Math.random() * 200);
        document.getElementById("imgId").src="https://picsum.photos/id/"+exampleOnly+"/500/300?" + rand;
    }

<body>   
    <p style="text-align:center;">
        <A HREF="#" onclick='refresh()'>Click to refresh the page</A></p>
<p style="text-align:center;"> <img src="https://picsum.photos/id/21/500/300" id='imgId' alt="Camera 2" >
    </p>
</body>

Answer 3

构造页面时，可以在每个文件的末尾添加以毫秒为单位的时间。我通常会从文件中获取修改时间，然后在php上这样构造src：

<img src="CAM2.png?<php echo filemtime( $file ); ?>" alt="Camera 2" width="100%">

最终将看起来像这样：

<img src="CAM2.png?1559820115091" alt="Camera 2" width="100%">

并且每次刷新页面时，src都会更改，这将迫使浏览器再次获取图像，因为这并不相同，但是对于您的代码而言完全透明。

如果您不能使用任何服务器语言通过这种方式创建页面，则可以尝试通过href调用JS函数（或者最好通过“ onclick”调用）：

    function refresh_images() {
        // i will use the full numeric value in miliseconds that getTime returns
        var date = new Date();
        var time = date.getTime();
        // changes every image's src
        $("img").each(function(){
            // save the current url to work with it
            current_url = $(this).attr('src');
            // check if i already changed the url (by adding an ? followed by miliseconds)
            if( current_url.indexOf('?') > 0 ) {
                // i remove the all from ? to end
                current_url = current_url.substr(0, current_url.indexOf('?') );
            }
            // i add an ? to the end folloed by the time in miliseconds
            new_url  = current_url + "?" + time;
            // i change the src
            $(this).attr('src', new_url );
        })
    }

此功能更改页面上的每个src，并且该更改将强制浏览器再次检查服务器上的新图像。通过在每个src末尾添加时间，图像每次都“不同”，浏览器将再次加载图像。

Answer 4

在这里看看：https://varvy.com/pagespeed/leverage-browser-caching.html

将缓存超时设置为1分钟？

关于，莱斯利

强制重新加载图像并清除缓存

4 个答案:

示例