5

他の誰かがテーブル プラグインを使用する代わりに、テーブルや行などを作成する標準的な HTML の方法を選択します。データベースからデータを取得して行を埋めます。しかし、行数が 10,000 を超えたとき、行を lazy_load する必要があることに気付きました。そうしないと、Web サイトが非常に遅くなります。テーブルの行を遅延ロードする方法を探しましたが、どこにも見つからないようです。私の質問は、単に遅延ロード プラグインまたは行が存在するかどうかです。

何人かの達人がこれに答えてくれることを願っています。前もって感謝します！

私がやろうとしていることの背景: 私は html コードでテーブルの大まかなスケッチを作成しています。実行時に、ユーザーが特定のものを検索すると、DOM を介してテーブルに行を追加します。彼らがそれを検索すると、何千もの結果が得られるので、結果をテーブルに遅延ロードしたいと考えています。

jQuery は、画像と画像のコンテナーの遅延ロードを提供します。

他のいくつかのプラグインでは、div の遅延ロードが許可されていました。

ただし、テーブル行の遅延ロードは存在しないように見えました。

コンテキストのサンプル コード:

HTML:

        <fieldset>
        <legend>PhotoViewer v1.6</legend>
        <h4 id = "albumName"><i>Photos</i></h4>
        <table cellspacing="1" border="2" id = "photoTable" class = "lazyProgressiveLoad">
            <tr style="font-style: italic; font-size: small; font-family: Segoe UI Light; color: Red">
                <th>--Photo--</th>
                <th>--Label--</th>
                <th>--Path--</th>
                <th><input type="button" value="Add Photo" onclick="addPhoto()" id = "addPhoto"/></th>
            </tr>
        </table>
    </fieldset>

以下の表の行のコードと同じ機能を可能にするコードを探しています。

Javascript:

$(function() {
      $("img").lazyload({
          effect : "fadeIn"
          /*
          ,appear : function(elements_left, settings) {
              console.log("appear");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          },
          load : function(elements_left, settings) {
              console.log("load");
              console.log(elements_left);
              //console.log(this, elements_left, settings);
          }
          */
      });
  });
4

2 に答える 2

7

DOM に何千行ものデータを格納することは、1 つの単純な理由でひどい考えです: DOM は遅いです。

代わりに、表示する必要がある行のみをレンダリングします。行が表示されなくなったら、DOM から削除します。

データのグリッドを表示するための私のお気に入りのライブラリはSlickGridです。ビューポート内のデータの DOM 要素のみをレンダリングすることで、驚異的なパフォーマンスで事実上無制限の量のデータを表示できます。(この例では50 万行が表示されます!)

SlickGrid の機能を示す例は他にもありますが、特にAJAX 読み込みの例に興味があるでしょう。スクロールすると、サーバーから行の小さなチャンクがストリーミングされます。

于 2012-09-24T22:49:51.980 に答える
0

このようなことができるプラグインについては聞いたことがありませんが、私はほとんどの場合、派手なJSの「ライブラリ」を避けています。概念的には、AJAXリクエストを使用して、たとえばm> id> nの画像を選択し、さらに画像をロードする場合はJavaScriptで別のajaxリクエストを実行できますが、たとえばmとnを100ずつ増やします。

この原則に基づいて動作するオープンソースのギャラリーフレームワークはたくさんありますが、通常、AJAXを使用して内部のhtmlを動的に変更するのではなく、phpを使用してページを生成します。

データベースデータをAJAXからJSに取得する方法は次のとおりです。 http://www.w3schools.com/ajax/ajax_database.asp

于 2012-09-24T22:26:30.757 に答える