S3 に自動的に生成されて保存された静的な html ファイルがあります。ファイルのサイズが 2 MB に達することがあります。javascript を使用して html ファイルの一部を取得し、それを表示し、ユーザーがページの下部に到達したときに次の部分を取得することは可能ですか?
3 に答える
XHR オブジェクトは、カスタム HTTP ヘッダーを設定する方法を提供します。そのため、静的ファイルの一部だけを取得するために、 Range ヘッダーを設定してみることができます。
ファイルの任意のスライスを切り取っているため、チャンクが適切な HTML ではないことを考慮する必要があります。そのため、結果を表示する場合は、結果を適切に処理するロジックを実装する必要があります。
通常の場合のようにサーバーへのチャンクを活用するのではなく、この方法で実装していただきたいと思います。
問題は、無限スクロールを行う方法ではなく、一度に大きなファイルの一部をロードし、ユーザーが下にスクロールするにつれてさらにロードする方法です。それが可能かどうかはわかりませんので、別の解決策を次に示します。
大きなファイルを小さなチャンクに保存します。たとえば1.txt, 2.txt ...
、ページを下にスクロールすると、次のN.txt
. (ちなみに、txt である必要はありません)。ラッパー (ユーザーが実際に見るファイル) が完全な HTML を持ち、ロードするチャンクが単なるコンテンツであることを確認してください。つまり、チャンクに</body></html>
... のようなものを含める必要はありません。これは、ラッパー ファイルにある必要があります。
AJAXまたはjQueryを使用してファイルを取得する方法は次のとおりです。あなたが本当にしなければならないのは、次の部分をロードできるように、現在の部分を追跡することだけです. 存在しない場合は、ファイル全体をロードしています。
これは完全に可能です。サーバー上で「フラグメント」を事前にレンダリングできるという考えです。各フラグメントは、N 個の記事の「サブページ」または何を持っているかを表します。次に、0 (または 1) のフラグメントでページをレンダリングし、クライアントに送信します。クライアントが一番下までスクロールしたら、(AJAX を使用して) 次のフラグメントを要求し、それを前のフラグメントの末尾に追加するだけです。これを無限に続けます。
理解すべき重要なポイントは、各フラグメントがサーバー上で静的にレンダリングされることです。フラグメント自体は完全な HTML ページではないかもしれませんが、既存のページに「無限に追加可能」です。(完全な HTML とは対照的に) HTTP の楽しみの 1 つは、フラグメントを正常に処理するために完全な HTML ページを用意する必要がないことです。HTML は、整形式でない追加の HTML (ボイラープレート内に配置すると整形式になる) の任意のチャンクを囲む「ボイラープレート」と考えることができます。
AJAX は HTTP リクエストに基づいているため、任意のコンテンツを要求できます。応答を「キャッチ」する Javascript が、ブラウザーが理解できる方法 (つまり、HTML、CSS、および JavaScript) で応答をフォーマットできる限り、独自のカスタム マークアップを要求できます。