Question

我为PC提供了一个基本的远程控制API，它通过AJAX接受命令（移动鼠标，点击，发送键等）。它还为指定的屏幕提供图像

API有一个前端，主要是jQuery驱动的。

我有一个img标签，显示当前所选屏幕的屏幕截图，并有鼠标移动/点击事件，可在幕后调用相应的API。

屏幕图像目前更新如下：

    function UpdateScreen() {
        $("#Screenshot").attr("src", "./AJAX/UI/GetScreen.aspx?Screen=" + encodeURIComponent(targetScreen) + "&Date=" + encodeURIComponent(Date()));
        setTimeout('UpdateScreen()', 3000);
    }

哪个工作正常，但效率低得离谱 - 图像加载时间不到3秒，在这种情况下，我的刷新率低于应有的值或超过3秒，在这种情况下旧请求终止（例如移动超过2G）。

如何在完成加载后重新加载图像？更好的是，有没有什么方法可以像AJAX调用一样，而不是依赖浏览器？这样，我可以捕获失败，有一个进度条，还可以控制图像的重绘方式（使用像缓冲区这样的东西）。

提前致谢

Answer 1

使用本机Javascript Image对象并等待onload在设置超时之前触发...

function UpdateScreen() {
  var img = new Image();
  img.onload = function() {
    $("#Screenshot").attr("src", this.src);
    setTimeout(UpdateScreen, 3000);
  }
  img.src = "./AJAX/UI/GetScreen.aspx?Screen=" + encodeURIComponent(targetScreen) + "&Date=" + encodeURIComponent(new Date());
}

Answer 2

在图像上使用加载事件。即：

$("#Screenshot").load(UpdateScreen);
  function UpdateScreen(){
  $("#Screenshot").attr("src", "./AJAX/UI/GetScreen.aspx?Screen=" 
    + encodeURIComponent(targetScreen) + "&Date=" + encodeURIComponent(Date()));        
}

Answer 3

试试这个......

function UpdateScreen() {

   var imgSrc = "./AJAX/UI/GetScreen.aspx?Screen=" + encodeURIComponent(targetScreen) + "&Date=" + encodeURIComponent(Date()),
       img = new Image();

   img.onload = function() {
    $("#Screenshot").attr("src", img.src );           
       setTimeout(UpdateScreen, 3000);
   };

   img.src = imgSrc;

}

JQuery重复加载图像

3 个答案: