如何在浏览器中渲染动态图像

Question

我正在尝试在浏览器中呈现动态创建的图像。图像在运行时被多次更新，因此我试图刷新它。但是每当启动浏览器中的刷新调用使用缓存的源时，而不发送查询到服务器。我正在使用 rails 4.2 和 ruby​​ 2.2。

这是我的刷新调用

$().ready(function(){ 
$("#ajax_sub").onclick=function(){
           var par=$("#ajax_par").value
               $.ajax({
                type: "get",
                url: 'pages/plot',
                data: {'symbol' : par}
            }).success(function(){
                if($("#img_plot")){
                    remove_plot()
                }
                refresh_plot()
          })
        }
    })
refresh_plot=function(){
    console.log("loading image")
    img_obj=document.createElement("img")
    img_obj.id="img_plot"
    img_obj.src="/pages/stream"
    $("#plot").appendChild(img_obj)
}

这是控制台输出

于 2015 年 3 月 10 日开始为 127.0.0.1 获取“/pages/plot?symbol=cos” 11:35:44 -0400 PagesController#plot 处理为 / 参数： {"symbol"=>"cos"} 在 31ms 内完成 200 OK (Views: 0.2ms | 活动记录：0.0ms)

于 2015 年 3 月 10 日 11:35:44 -0400 开始为 127.0.0.1 获取“/pages/stream” PagesController#stream 处理为 HTML 发送文件 public/plot.png (0.3ms) 1ms 内完成 200 OK (ActiveRecord: 0.0ms) [2015-03-10 11:35:44] 警告无法确定的内容长度 响应体。设置响应的内容长度或设置 响应#chunked = true

于 2015 年 3 月 10 日开始为 127.0.0.1 获取“/pages/plot?symbol=sin” 11:35:51 -0400 PagesController#plot 处理为 / 参数： {"symbol"=>"sin"} 在 27 毫秒内完成 200 次 OK（查看：0.2 毫秒 | 活动记录：0.0ms)

Ajax 调用更新控制器（pages#plot）中的图像，并调用“/pages/stream”从 pages#stream 发起 send_file 请求。 第一次单击时会启动两个 Get 调用，之后只有一个。

如何修改此行为，以便刷新图像？

Answer 1

使用您的浏览器开发者控制台检查发生了什么。我假设没有对图像发出请求，因为它的源已被缓存。您可以通过将所有缓存标头设置为 no-cache 或在图像 URL 中附加一些独特的内容（例如 ?somerandomstring）来规避此问题，这样您的浏览器每次都会使缓存无效。