JQuery загружает изображение повторно

Question

У меня есть элементарный 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 и подождите, пока загрузится загрузка, прежде чем устанавливать тайм-аут ...

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

Попробуйте это ...

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;

}

Answer 3

Используйте событие загрузки на изображении.т.е.:

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