4

私は現在、画像を検索し、次のようなリスト要素として結果を返す検索ボックスをウェブサイトに持っています。

<ul>
    <li rel="1"><img src="imgurl" /></li>
    <li rel="2"><img src="imgurl" /></li>
    <li rel="3"><img src="imgurl" /></li>
    <li rel="4"><img src="imgurl" /></li>
</ul>

次に、各画像にはクリックイベントが関連付けられており、クリックされた画像の親liにオーバーレイを追加するだけです。

検索結果に 300 件以上の結果が含まれることがあります。これは、デスクトップではそれほど問題ではありませんが、モバイル デバイスでは大きな遅延が発生します。たとえば、誰かが画像をクリックしてオーバーレイを追加する場合、オーバーレイが表示されます。

今、私はこれを修正する方法を考えました：

  1. すべての li 要素を配列に追加します (DOM 要素ではなく文字列として)

  2. 元の li 要素を破棄します。

  3. 画面のサイズと一度に表示できる画像の数を計算する

  4. リストをスクロールするために使用するスライダー UI 要素を追加します。

  5. スライダーの位置と、画面に収まる要素の数に基づいて、実際に表示できる要素を配列から抽出し、残りを破棄します

  6. 返された配列の結果をループし、すべての結果を 1 つの文字列に追加します。次に、表示できるすべての結果を含む文字列を UL に追加します。

私の質問は、これにより実際にパフォーマンスが向上するかどうかです。私の最初の問題は、dom の要素が多すぎることだと私は信じています。

また、これは一般的なことですか、それともより良い方法はありますか?

ありがとう

4

1 に答える 1

2

モバイルでのパフォーマンスの低下は、DOM内のアイテムの数が多いことが原因のようです。jsfiddleのコードを高速化するためにさまざまな方法を試しました（たとえば、jQuery DOMリクエストの数を減らす）が、それでも遅いhttp://jsfiddle.net/5LfMt/15/

私はあなたの元の質問で提案のバリエーションを作りました：http：//www.strudel.org.uk/test/stack.htmlそれは非常にラフで、エラーチェックはありませんが、基本的なアイデアが機能することを示していますそしてより速いです。ブラウザは最初に500枚すべての画像をレンダリングする必要がないため、ページのレンダリング時間にも役立つはずです。

すべての画像の高さが同じであると仮定しました。ファイル名の配列を作成してから、どのファイル名が表示されているかを確認しました。リストの一番上のパディングは、ドキュメント内の正しい場所にとどまるように更新されます。リストを更新するスクロールリスナーを添付しました-リストアイテムを削除してから、表示されているアイテムを追加します。それらをDOMから削除した結果の1つは、オーバーレイも削除されたため、オーバーレイのステータスを記録する配列を作成したことです。

于 2012-05-19T16:33:43.887 に答える