適切な遅延読み込みには、通常、オブジェクトとプロキシ パターンを使用する必要があることを知っています。サイトを再設計する必要があるため、私はまだそこにいません。ただし、DB データをページにスプールして、読み込み時間を少し短縮する方法はありますか?
2 に答える
これは AJAX で実現できます。
ページを初めて読み込むときは、重いコンテンツが配置される場所にプレースホルダーを配置します。たとえばdiv
、特徴的なスタイルの を使用し、アニメーション化された読み込み画像を内部に使用して、訪問者がさらに読み込みが行われていることを明確に伝えるようにします。ajaxload.infoで見慣れたAJAX 読み込みイメージを生成できます。
ページの下部に、AJAX を使用して追加のコンテンツをロードするために必要な関数を呼び出しまたはバインドするスクリプトを配置します。.ready()
たとえば、AJAX 呼び出しを jQuery にバインドして、ドキュメントの残りの部分の準備が整うとすぐに読み込み.scroll()
を開始したり、ユーザーが特定の要素をスクロールしたときに開始したりできます (たとえば、ページのブロックを区切る特定の「ランドマーク」を過ぎたとき)。コンテンツ)。
追加のコンテンツ (文字列形式の HTML として事前にフォーマットされていることが望ましい) を含む AJAX 応答を受信したら、または jQuery のdiv
を使用して、プレースホルダーのコンテンツを AJAX 応答に置き換えます。必要に応じて、または jQueryを使用してスタイルを変更し、CSS クラスを置き換えます。.innerHTML =
.html()
div
setAttribute("class","newClass")
.attr("class","value")
読み込みが行われている間、訪問者はページ全体を表示してスクロールすることができます。追加のコンテンツは、訪問者のブラウジング エクスペリエンスを中断することなく、準備が整うと表示されます。コンテンツ インジェクションの後にトランジションをアニメーション化することで、これを少し見やすくすることができます。
AJAX を使用してコンテンツを非同期に取得する方法の追加の例が必要な場合は、これらの従来の JavaScript アプローチまたはjQuery .ajax() docsを参照してください。
メインページが読み込まれるとすぐに、JavaScript を使用して追加データの読み込みを開始できます。このようにして、メイン ページはページ上のコンポーネントの概要を示し、より多くのデータが読み込まれていることを示す「スピナー」を表示し、それを JavaScript にオフロードしてより多くのデータを取得できます。