11

無限スクロールのウェブサイトを作っています。つまり、ユーザーがページの一番下までスクロールすると、コンテンツの新しいブロックが一番下に追加されます。フェイスブックとよく似ています。ロードされた 3 つのページの例を次に示します。

 _________
|         |
|    0    |
|_________|
|         |
|    1    |
|_________|
|         |
|    2    |
|_________|

ユーザーが最後のページで何かをクリックすると、別の詳細ページに移動します。しかし、ユーザーがクリックして検索結果ページに戻った場合、以前の場所の記憶がなく、ページ 0 を再度読み込む必要があります。

 _________
|         |
|    0    |
|_________|

これを解決するための昔ながらの方法をいくつか知っていますが、それぞれにいくつかの深刻な問題があります。

ハッシュ URL

新しいページが読み込まれるたびに URL を更新できます。例: www.website.com/page#2。ユーザーが詳細ページに移動して戻ると、URL は最後に読み込まれたページを教えてくれるので、それを読み込みます。

 _________
|         |
|    2    |
|_________|

しかし、これではユーザー エクスペリエンスが低下します。ページ 2 のみがロードされます。ユーザーは上にスクロールして古いコンテンツを表示することはできません。戻るボタンが Web トラフィックの 50% を占めることを考えると、ページ 0、1、2 だけをロードすることはできません (Jacob Nielsen の調査)。

ローカルストレージ

Cookie には、多くのページのデータを保存するためのストレージ容量がありません。ローカル ストレージには十分なスペースが必要です。1 つのアイデアは、読み込まれたすべてのページをローカル ストレージに保存することです。ユーザーが検索結果に戻ると、サーバーにアクセスする代わりに、ローカル ストレージから読み込みます。このアプローチの問題は、ユーザーの大部分がローカル ストレージ(IE7) をサポートしていないブラウザーを使用していることです。

4

2 に答える 2

1

ユーザーを別の詳細ページに完全に誘導する代わりに、メインのスクロール コンテンツを非表示にし、Ajax /XMLHttpRequest() を介して詳細コンテンツを読み込んでから、そのコンテンツを表示しないのはなぜでしょうか? 言い換えれば、Facebookのやり方と同じです。これができるかどうかは、コンテンツが何であるか、それがあなたが設計および制御しているものか、それとも外部のものかによって異なると思います。

于 2012-04-17T18:48:54.313 に答える
1

あなたの問題の制約を考えると、私が考えることができる唯一のもっともらしい解決策は、前のページの高さをキャッシュし、ユーザーが上にスクロールした場合にそれらをロードすることです。これにより、上向きのスクロールがパディングされ、ユーザーが見上げた場合にロードをトリガーできるようになります。さらに、もう少し派手にしたい場合は、スクロールバーをフリーズして、ユーザーが前のアンロードされたページを超えてスクロールしないようにする方法を見つけようとします。この方法では、一度に複数のページの読み込みをトリガーすることはできません。

于 2012-04-17T18:28:47.957 に答える