Image JQuery反复加载图像

我有一个用于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调用一样，而不是依赖于浏览器？这样，我可以捕捉失败，有一个进度条，还可以控制图像重画的方式（使用类似于后台缓冲区的东西）

---

提前感谢

使用本机Javascript

图像

对象，等待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());
}

---

使用本机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());
}

---

在图像上使用加载事件。i、 e:

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

---

在图像上使用加载事件。i、 e:

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

试试这个

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;

}

试试这个

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;

}

---

我喜欢此解决方案的简单性，因此+1，但将授予不同的海报，因为使用

图像

对象会给我额外的控制权。我喜欢此解决方案的简单性，因此+1，但将授予不同的海报，因为使用

图像

对象会给我额外的控制权。感谢-唯一我同意乔希的原因是他回答得稍微快一点。谢谢——我同意乔希的唯一原因是他回答得稍微快一点