如何在浏览器中呈现动态图像
how to render a dynamic image in browser
我正在尝试在 browser.The 中呈现动态创建的图像图像在运行时得到多次更新,因此我试图刷新 it.But 每当启动的浏览器中的刷新调用使用缓存的源,而不向服务器发送查询。我正在研究 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)
}
这是控制台输出
Started GET "/pages/plot?symbol=cos" for 127.0.0.1 at 2015-03-10
11:35:44 -0400 Processing by PagesController#plot as / Parameters:
{"symbol"=>"cos"} Completed 200 OK in 31ms (Views: 0.2ms |
ActiveRecord: 0.0ms)
Started GET "/pages/stream" for 127.0.0.1 at 2015-03-10 11:35:44 -0400
Processing by PagesController#stream as HTML Sent file public/plot.png (0.3ms) Completed 200 OK in 1ms (ActiveRecord: 0.0ms)
[2015-03-10 11:35:44] WARN Could not determine content-length of
response body. Set content-length of the response or set
Response#chunked = true
Started GET "/pages/plot?symbol=sin" for 127.0.0.1 at 2015-03-10
11:35:51 -0400 Processing by PagesController#plot as / Parameters:
{"symbol"=>"sin"} Completed 200 OK in 27ms (Views: 0.2ms |
ActiveRecord: 0.0ms)
Ajax 调用更新控制器 (pages#plot) 中的图像并调用“/pages/stream”从 pages#stream 发起 send_file 请求。
第一次单击时会启动两个 Get 调用,之后只会启动一个。
我如何修改此行为,以便刷新图像?
使用您的浏览器开发人员控制台检查发生了什么。我假设没有为图像发出请求,因为它的源已经被缓存。你可以通过将所有 cache-headers 设置为 no-cache 或附加一些独特的东西到 image-url 来绕过这个,比如 ?somerandomstring
这样你的浏览器每次都会使缓存无效。
我正在尝试在 browser.The 中呈现动态创建的图像图像在运行时得到多次更新,因此我试图刷新 it.But 每当启动的浏览器中的刷新调用使用缓存的源,而不向服务器发送查询。我正在研究 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)
}
这是控制台输出
Started GET "/pages/plot?symbol=cos" for 127.0.0.1 at 2015-03-10 11:35:44 -0400 Processing by PagesController#plot as / Parameters: {"symbol"=>"cos"} Completed 200 OK in 31ms (Views: 0.2ms | ActiveRecord: 0.0ms)
Started GET "/pages/stream" for 127.0.0.1 at 2015-03-10 11:35:44 -0400 Processing by PagesController#stream as HTML Sent file public/plot.png (0.3ms) Completed 200 OK in 1ms (ActiveRecord: 0.0ms) [2015-03-10 11:35:44] WARN Could not determine content-length of response body. Set content-length of the response or set Response#chunked = true
Started GET "/pages/plot?symbol=sin" for 127.0.0.1 at 2015-03-10 11:35:51 -0400 Processing by PagesController#plot as / Parameters: {"symbol"=>"sin"} Completed 200 OK in 27ms (Views: 0.2ms | ActiveRecord: 0.0ms)
Ajax 调用更新控制器 (pages#plot) 中的图像并调用“/pages/stream”从 pages#stream 发起 send_file 请求。 第一次单击时会启动两个 Get 调用,之后只会启动一个。
我如何修改此行为,以便刷新图像?
使用您的浏览器开发人员控制台检查发生了什么。我假设没有为图像发出请求,因为它的源已经被缓存。你可以通过将所有 cache-headers 设置为 no-cache 或附加一些独特的东西到 image-url 来绕过这个,比如 ?somerandomstring
这样你的浏览器每次都会使缓存无效。