サードパーティのjqueryライブラリを使用して「画像」を遅延ロードできることを知っています。<div>
たとえば、ユーザーがその<div>
コンテナにスクロールするときなど、要素コンテナのようなものを遅延ロードする方法はありますか
3 に答える
kinshoの(正しい)答えを拡張するには:
セキュリティと保守の理由から、未加工の HTML をドキュメントに直接挿入することには注意が必要です。これを行うと、イベント リスナーが破損し、DOM パーサーが破損し、セキュリティの脆弱性が生じる可能性があります。
通常、物事を遅延ロードする最良の方法は、エンコードされたデータ (JSON や XML など) をクライアントに送信し、それに応じて結果を処理することです。基本的な HTML の場合、テンプレート ソリューションを使用できます。要素の に * をiframe
貼り付けるよりも、<div><h1>Hello</h1><table><tbody><td><tr>1</td></tr><tr><td>2</td></tr></tbody></table></div>
innerHTML
また、サイトに遅延読み込みを実装する前に、それが本当に価値があるかどうかを検討してください。追加の HTTP 要求は、データを一度にすべてダウンロードするよりも明らかにコストがかかります。また、Javascript を介して挿入された HTML は、Web 検索クローラーによって認識されません。したがって、少量の静的情報のみを注入する場合は、問題を起こす価値はありません。
*解析エラーを見つけることができますか? ここで、標準サイズの HTML ドキュメントに対してこれを行うことを想像してください。
遅延読み込みを支援するためにサードパーティのライブラリに依存する必要はありません。ネイティブの JavaScript を使用して問題なく実行できます。
実際、すべての遅延読み込みが何らかのユーザー アクションによってトリガーされるという原則を受け入れる限り、特定のオブジェクト (スクロール バー、セクション ヘッダーなど) にリスナーを設定します。AJAX (ここでは jQuery を使用できます) に依存する対応するハンドラーをセットアップしてinnerHTML
、コンテナー要素のプロパティを使用して、任意のコンテナーに直接読み込むことができるデータ (できれば HTML) をフェッチします。
これがあなたが本当に始めたかったことです。自分で作った新しいjQueryプラグインです。任意の要素 (jQuery セレクター) に基づいて、必要なものを "Lazy Load" できます。