如何在浏览器中呈现动态图像

how to render a dynamic image in browser

本文关键字：动态 图像 浏览器      更新时间：2023-09-26

我正在尝试在浏览器中渲染动态创建的图像。图像在运行时多次更新，因此我正在尝试刷新它。但是，每当启动的浏览器中的刷新调用使用缓存的源时，都不会向服务器发送查询。 我正在研究 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-03-10 开始为 127.0.0.1 获取 "/pages/plot？symbol=cos" 11：35：44 -0400 通过页面控制器#plot 作为 / 参数进行处理： {"符号"=>"cos"}在 31 毫秒内完成 200 OK （浏览次数： 0.2ms | 活动记录：0.0毫秒）

在 2015-03-10 11：35：44 -0400 为 127.0.0.1 启动 GET "/pages/stream" 由 PagesController#stream 作为 HTML 处理 发送文件 public/plot.png （0.3ms） 在 1ms 内完成 200 OK （活动记录： 0.0ms） [2015-03-10 11:35:44]警告 无法确定 响应正文。设置响应的内容长度或设置 响应#分块 = 真

在 2015-03-10 开始为 127.0.0.1 获取 "/pages/plot？symbol=sin" 11：35：51 -0400 通过页面控制器#plot 作为 / 参数进行处理： {"符号"=>"罪"}在 27 毫秒内完成 200 OK （观看次数： 0.2 毫秒 | 活动记录：0.0毫秒）

Ajax 调用更新控制器（pages#plot）中的图像，调用"/pages/stream"会发起来自pages#stream的send_file请求。 第一次单击时，将启动两个"获取"调用，然后仅启动一个。

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

使用浏览器开发人员控制台检查发生了什么。 我假设没有为图像发出任何请求，因为它的源已经被缓存了。 您可以通过将所有缓存标头设置为无缓存或将独特的内容（如 ?somerandomstring）附加到图像 URL 中来规避这种情况，以便您的浏览器每次都使缓存失效。

相关文章：