2011-07-05 13 views
3

私はポートフォリオのウェブサイトを作成しており、各作品の間をスライドする水平のスライダを持っています。 100点の作品があり、それらはすべて図形的に集中的なものやフラッシュオブジェクトだとしましょう。ブラウザのパフォーマンス表示/表示

また、一度に画面に最大4つの作品があるとします。

これらはすべて、1つの大きなdiv内にあり、leftプロパティを変更してdivを移動するためにjQueryで操作します。

ハイエンドのマシンでは、それは素敵でスムーズですが、例えばネットブックでは、それは本当に不安定です...または遅いブラウザでも。

私がやっていることは、どの作品が移行して表示されるかを見極めることです。私はこれがパフォーマンスの向上をもたらすことを願っています。しかし、私はvisibilityプロパティをhiddenに設定する予定ですので、要素の次元はそのままです。しかし、displaynoneに設定し、作業を隠すのではなくプレースホルダ要素を作成する方がパフォーマンスが向上すると思いますか?

低速のマシン/ブラウザでは、他にどのような方法でパフォーマンスを向上できますか?

答えて

2

display:none;からパフォーマンスを向上させることはできません。コンテンツはまだ読み込まれます。

代わりに、いくつかのajaxを見ることができます。アイデアは、あなたが4だけを表示していても8個のアイテムをプリロードすることです。ユーザーが「次へ」ボタンをクリックすると、画面は、既にロードされている次の4個のアイテムにスライドし、同時に行の次の4個のアイテム読み込みを開始します。

http://yensdesign.com/2008/12/how-to-load-content-via-ajax-in-jquery/

+1

しかし、ユーザーがすべてのポートフォリオを通じてスライド場合は、彼らがビューの外にされた後、私はAjaxを使ってリロードし、その後要素を削除示唆しない限り、最終的には、すべての100個の項目が...ロードされますか?サーバーのパフォーマンスでヒットになるでしょう – Ozzy

+0

あなたが得るものは、ページロード時間がずっと高速です。ユーザーがページ上に100個のアイテムを持っている場合、スクロールするときに問題が遅れます。あなたが言及していない限り、以前のアイテムを削除しない限り、それについては何もしません。 – Steeven

+0

あなたが思っているように、サーバーのパフォーマンス要件はそれほど高くありません。アイテムは#1〜#100までのIDを持ち、過去4つのアイテムだけを削除します。それにもかかわらず、同じページに表示するために100項目のグレーフィカル項目を持つことはお勧めできません。これに代わる方法は、10オグ20項目を表示し、ユーザーが最後に到達したときに「もっと表示」することです。 – Steeven

関連する問題