1

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

プリローダーと複数の画像で読み込みステータスを表示する方法のJasonBuntingsの回答を見てきました。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');
  }
}

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

4

2 に答える 2

0

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

于 2009-08-03T00:17:25.097 に答える
0

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

あなたが得る最大の速度の改善の1つはあなたがしている要求の総数を減らすことです。

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

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

HTH：^）

于 2009-08-06T16:29:15.130 に答える