通过 javascript 进行图像轮询

发布于 2024-10-08 18:16:59 字数 721 浏览 1 评论 0原文

我需要使用 javascript 轮询图像,并且需要在找到图像所在位置后执行操作。这是我为此任务编写的代码。

/*----Image handling script starts here----*/
var beacon = new Image(); 
beacon.onload = function() {
    console.log('Image found'); 
    console.log(this.width,this.height);
    window.clearInterval(timer);
};
beacon.onerror = function(){    
   console.log('Image not found');
}
var timer = window.setInterval(function(){
    console.log('sending the request again');
    beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif";
},2000);
/*----Image handling script ends here----*/

问题是,在一个 GET 请求之后,响应会被缓存,并且每次我设置 src 时都不会发送请求。如果您检查 NET 选项卡,它仅在第一个 src 集上发送请求并缓存响应。

每次我的代码设置 src 时,我都需要发送一个新的图像请求。有什么解决方法吗?

I need to poll an image using javascript and need to perform an action once the image is found at its position. This is the code I have written for this task.

/*----Image handling script starts here----*/
var beacon = new Image(); 
beacon.onload = function() {
    console.log('Image found'); 
    console.log(this.width,this.height);
    window.clearInterval(timer);
};
beacon.onerror = function(){    
   console.log('Image not found');
}
var timer = window.setInterval(function(){
    console.log('sending the request again');
    beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif";
},2000);
/*----Image handling script ends here----*/

Problem is that, after one GET request, the response gets cached and request don't get sent everytime I set src. If you examine NET tab, it sends request only on first src set and caches the response.

I need to send a fresh request for image every time my code sets the src. Any workarounds?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

陌上芳菲 2024-10-15 18:16:59

更改您的 src 以包含当前 EPOCH 时间作为变量。

beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif?" +
    date.getTime();

每次在查询字符串中使用不同的变量都会错过缓存,因为就浏览器而言,每次请求图像时图像都是不同的(或者可能是不同的),并且图像的数量没有限制当你问的时候,时间希望不会停止......

Change your src to include the current EPOCH time as a variable.

beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif?" +
    date.getTime();

Using a different variable in the query string each time will miss out caching, because as far as the browser is concerned, the image is different (or potentially could be) each time you request the image, and there is no limit to the amount of times you ask, as time hopefully will not stop...

青丝拂面 2024-10-15 18:16:59

每次使用不同的查询字符串请求图像。浏览器会将其视为唯一的 URL,并且不会将其保存在缓存中。您可能可以摆脱这种情况,因为 Web 服务器在请求图像时可能会忽略查询字符串中的任何内容。以下应发出 100 个请求:

for (var i=0; i<100; i++)
{
    beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif?" + i;
}

Request the image with a different query string each time. The browser will treat it as a unique URL and won't have it in the cache. You can probably get away with this because it's likely the web server will ignore anything in the query string when requesting an image. The following should make 100 requests:

for (var i=0; i<100; i++)
{
    beacon.src = "http://www.google.co.in/logos/2010/lennon10-hp.gif?" + i;
}
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文