jQueryの負荷イメージが繰り返し

Question

また、指定した画面

APIのための画像を提供していますほとんどがjQueryで動くフロントエンドを持っています。

私はimgタグを持っています。このタグは、現在選択されているスクリーンのスクリーンショットを表示し、背後の適切なAPIを呼び出すマウスの移動/クリックイベントを持っています。

画面イメージは、現在、次のように更新されます

OK動作しますが、途方もなく非効率的である

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

- のいずれかを3秒未満での画像のロードが、その場合には、私のリフレッシュレートは、それがあるべきよりも低くなっていますまたは3秒を超えて古いリクエストが終了した場合（2G以上のモバイルなど）

イメージの読み込みが完了したらすぐにイメージを再読み込みできますか？さらに、ブラウザに頼るのではなく、AJAXの呼び出しと同じ方法でそれを行うことができますか？こうすることで、失敗をキャッチし、進行状況バーを表示したり、バックバッファのようなものを使ってイメージの再描画を制御したりすることができます。事前に

おかげ

Answer 1

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

は、画像上の負荷イベントを使用して...ネイティブのJavascript Imageオブジェクトを使用してタイムアウトを設定する前に発射するonloadイベントを待ちます。すなわち：

$("#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; 

}