jsのプリロード/遅延ロード_javascriptスキルの簡単な分析

プリローダー 一般に、プリロードには xhr とノードの動的挿入という 2 つの一般的な方法があります。ノードの動的挿入は、最も単純で最も普及している非同期ロード方法です。動的に挿入されたノード方法を使用してロードされたファイルは、一方では JavaScript の実行によってブラウザの JS 実行プロセスが占有されます。ただし、ページ構造が変更される可能性があり、CSS を実行するとページ全体が変更される可能性が高くなります。 xhr メソッドはスクリプトを実行しませんが、同じドメイン内の制限のため

レイジーローダーメソッドは、画像が多く含まれる一部の Web サイトで非常に便利です。ブラウザの表示領域外にある画像は、ユーザーがページをスクロールするまで読み込まれないため、画像が多く含まれる Web サイトの場合に便利です。 Web ページが長いほど、読み込みが速くなり、サーバーの帯域幅を節約できます。 jQuery プラグインには、この機能を実装するためのプラグインもあります。

この技術は、Tencent の QQ スペースや Weibo で使用されており、アクセス数の多い Web サイトでは、サーバーへの負荷を比較的軽減でき、ユーザーが表示領域と次のコンテンツにアクセスした場合にのみリクエストが行われます。ページ全体を一度にダウンロードするのではなく、ユーザーはダウンロード プロセス中にコンテンツが表示されるのを待ちます。

IE で new Image().src を使用してファイルをプリロードします。
他のブラウザは、動的に挿入された document.createElement('object') タグを使用して読み込みを完了します。

説明:
1. new Image().src が ff で使用できない理由は、ff が画像用に別のキャッシュを実装しているためです。 同時に、safariとchromeはキャッシュされないようです。
2. 動的に挿入されたオブジェクト タグは、読み込みをトリガーするために非ヘッド部分に挿入される必要があります。
3. ie7 および ie8 では、コードを通じて動的オブジェクトを使用してファイルを読み込むこともできます。