Image GWT：循环加载图像

我尝试实现一种基于简单JPEG文件的视频流。 在我的服务器上，一个JPEG是由外部摄像头循环创建的。 我只想在我的GWT应用程序中包含这张图片

我的第一个想法是用定时器重新加载图片，这个想法非常简单，但不是很好：客户端为每个重新加载周期打开一个连接，图片会闪烁（至少在Firefox中是这样）

我怎样才能解决这些问题？我在想“网络套接字”之类的东西，但我真的不知道怎么做。 我希望避免每次重新加载都使用一个连接。我的想法是建立一个开放式连接，只要客户要求，就可以随时提供新的图片

交换图片时如何避免闪烁

欢迎任何意见

---

就这点而言，VanDahlen

避免闪烁的一个解决方案是将两个图像绝对定位在同一位置。计时器将在每个帧中交替加载一个或另一个。为每个图像设置

load

处理程序，以便在加载图像时更改z索引并重新启动计时器

向图像url添加一个额外的参数，使得浏览器每次都要求服务器绕过其缓存

如果帧之间的时间间隔很短，则如果在服务器中正确配置，浏览器通常会重新使用相同的连接。它通常以5-15秒的典型值启用，您可以增加该值，因此，如果您的.jpg图像按此周期更新，您就不必担心并寻找更好的解决方案

基于这些想法，我提出了一个UI解决方案。但是，如果您使用websocket/comet机制以base64格式提供最后一个.jpg文件（只需通过返回的值更改url），那么它也可以工作

GWT代码：

模块加载（）上的公共void{
最终图像i1=新图像（）；
i1.设定宽度（“400px”）；
最终图像i2=新图像（）；
i2.设定宽度（“400px”）；
AbsolutePanel=新的AbsolutePanel（）；
添加（i1，0，0）；
添加（i2，0，0）；
面板设置尺寸（“600px”、“400px”）；
RootPanel.get（）.add（面板）；
//如果使用comet/websockets，则可以通过base64数据更改此设置
String url=“my_image\u url.jpg？”；
最终计时器加载下一个=新计时器（）{
布尔b；
INTC；
公开募捐{
//计数器参数强制加载下一帧，而不是使用缓存
如果（b=！b）{
i1.setUrl（url+c++）；
}否则{
i2.setUrl（url+c++）；
}
}
};
i1.addLoadHandler（新的LoadHandler（）{
公共void onLoad（LoadEvent事件）{
i1.getElement（）.getStyle（）.setZIndex（1）；
i2.getElement（）.getStyle（）.setZIndex（0）；
附表（1000）；
}
});
i2.addLoadHandler（新的LoadHandler（）{
公共void onLoad（LoadEvent事件）{
i1.getElement（）.getStyle（）.setZIndex（0）；
i2.getElement（）.getStyle（）.setZIndex（1）；
附表（1000）；
}
});
附表（1000）；
}

如果要使用，代码明显更小：

//如果使用comet/websockets，可以通过base64数据更改此设置
最后一个字符串url=“my_image\u url.jpg？”；
final GQuery images=$（“每个帧的url是否会更改？不，每个图片的url都是相同的。我已经添加了一个额外的参数，用于强制浏览器重新加载图片。好的，我的答案应该适用于您。谢谢。另一个问题是我们没有使用标准的Web服务器（我们使用的是一个非常罕见、令人不舒服、陈旧/不推荐的操作系统…：-S），因此我必须自己实现保持活动功能：（@VandDahlen，你到底在用什么作为不支持保持活动的Web服务器？。自HTTP/1.1（1999年定义）以来，持久连接是一个标准。