サムネイルの読み込み中にフィードバックを提供し、読み込み順序を制御する方法

Question

1つのページに約250〜300個のサムネイルがあり、それぞれが水平方向にスクロールできる5つの異なるdivに含まれるWebサイトを構築しています。
ただし、読み込み段階では、サムネイルをクリックして、ライトボックスにフル解像度の画像を読み込むことができる必要があります。

プリローダーと複数の画像で読み込みステータスを表示する方法でジェイソン・バンティングスの回答を見ましたか？半分の方法：IEでは機能しますが、FFでは機能せず、すべてのサムネイルがロードされるまでライトボックスイメージをロードしません。

だから私は同じ概念に基づいて独自のコードを構築しました：それは動作しますが、不安定（ランダムにハング）し、大量のメモリを使用します：

function doLoadThumbnails(queue) {
  if (!queue.isEmpty()) {
    if (connManager.AcquireConnection()) {
        var imageLink = queue.dequeue();
        var loader = new Image();
        loader.onload = function() {
            imageLink.firstChild.src = imageLink.href;
            connManager.ReleaseConnection();
        }
        loader.src = imageLink.href;

        doLoadThumbnails(queue);
    } else {
        connManager.getEventObject().bind('connReleased', function(e) {
            window.setTimeout(function() {
                doLoadThumbnails(queue);
            }, 50);
            connManager.getEventObject().unbind('connReleased', arguments.callee);
        });
    }
  }
}

ConnectionManagerは次のようになります。

function ConnectionManager() {
  var eventObject = $('<span id="ConnectionManager"></span>').appendTo("body");
  var activeConnections = 0;
  var maxConnections = 5;

  this.getEventObject = function() {
    return eventObject;
  }

  this.isConnectionAvailable = function() {
    return activeConnections < maxConnections;
  }

  this.AcquireConnection = function() {
    if (activeConnections < maxConnections) {
        activeConnections++;
        return true;
    } else {
        return false;
    }
  }

  this.ReleaseConnection = function() {
    activeConnections--;
    eventObject.trigger('connReleased');
  }
}

これは基本的に健全な概念なのか、それとも先に進んでいるのか？これを行うためのより良い/簡単な方法を知っていますか？

Answer 1

  

これはこれを行うための好ましい方法ですか、または   より良い、より速い可能性がありますか？

得られる最大の速度改善の1つは、作成するリクエストの総数を減らすことです。

サーバー上の画像処理ライブラリにアクセスできる場合、各divのすべてのサムネイルを1つの大きなコンタクトシート画像にレンダリングするスクリプトを作成することを検討する価値があります。

イメージマップを使用して、ユーザーがコンタクトシートをクリックしたときに表示するフル解像度の画像を把握できます（または、CSSスプライトテクニックを使用して、正しいサムネイルをリンクの背景としてレンダリングできます）マウスオーバーでサムネイルの境界線を強調表示する場合は、フル解像度の画像）。

HTH：^）

Answer 2

1つの提案：「デフォルト」になります2への最大接続数-とにかく同じドメインへのHTTP / 1.1仕様で最も許可されているため、ほとんどのブラウザは一度に2つ以上の画像をロードしません。