【问题标题】：Force reload image and clearing cache [duplicate]强制重新加载图像并清除缓存[重复]
【发布时间】：2019-10-21 21:38:10
【问题描述】：

我有一个 Raspberry Pi，每 1 分钟使用 FTP 覆盖网络服务器（而不是 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>

【问题讨论】：

尝试随机url参数值
我不是动态编写我的 HTML，它只是一个简单的普通老式 html 页面，我在其中替换图像文件
它应该可以工作。你只需要覆盖 url.each 时间。或者你可以动态地获取图像

标签： html

【解决方案1】：

一个标准的技巧是在图像上附加一个唯一的数字，如图所示。每次加载 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>

【讨论】：

【解决方案2】：

如果您有权访问服务器的配置，则可以将其中的缓存期限设置为 0 分钟。如果您通过例如路由所有流量Cloudflare 你也可以在那里设置缓存过期时间。另一种选择是为每个图像使用另一个文件名，并与图像同时更新 HTML。比设置一次缓存过期日期要多一些努力。

【讨论】：

【解决方案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 末尾添加时间，图像每次“不同”，浏览器将再次加载图像。

【讨论】：

OP 没有显示他们正在使用 PHP 的迹象

【解决方案4】：

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

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

问候，莱斯利

【讨论】：

什么是页面在 30 秒内被用户重新加载？