AJAXが読み込まれた画像が完全にダウンロードされたときを検出する方法は？

Question

私は、ホームページに回転バナーがあるウェブサイトで作業しています。ページがロードされると、AJAXリクエストが実行されて残りのバナー（それぞれが960ピクセル幅のイメージを持つ）を取得します。私は、すべてのバナーHTMLが読み込まれた状態でページをロードするというアイデアを思いつきましたが、ウェブサイトのターゲットオーディエンスが必ずしも驚くほどのつながりになるとは限らず、ホームページをすばやくロードしたかったのです。さらに、矛盾するH1タグを必要としませんでした。問題のページはランディングページですhttp://www.gosihanoukville.com/

遅い接続の場合、背景イメージの読み込みが完了する前にバナーが読み込まれ、回転が開始されます。スクリプトでバナーを動かす前に、画像が完全にダウンロードされたかどうかを検出する方法があるかどうかは疑問です。

私は上記のウェブサイトで最もよく見られるように、ここにコードを含めません。使用したJSファイルは「landing.js」

ありがとうございました。これは私を狂っています。

Answer 1

私は通常、これを行うだろう：

var imagesToLoad = []; 
var imagesLoaded = 0; 

// Register this handler using whatever framework you like 
var whenImageLoaded = function(){ 
    if (++imagesLoaded == imagesToLoad.length){ 
    // Start moving the banners. 
    } 
}