一般に、ファイルをプリロードするには、xhr とノードの動的挿入という 2 つの一般的な方法があります。動的にノードを挿入することは、最も簡単で最も広く普及している非同期ロード方法です (yui の Get モジュールなど)。その場合、動的に挿入されたノード メソッドを使用してロードされたファイルは、ロード直後に実行されます。一方で、JavaScript の実行はブラウザの js を占有します。一方、プロセスはページ構造を変更する可能性もあり、CSS を実行するとページ全体が変更される可能性が高くなります。 xhr メソッドではスクリプトは実行されませんが、同一ドメインの制限により、Web サイトの静的ファイルが CDN サーバーにデプロイされるようになったため、css js ファイルをどのようにプリロードするかが少し謎になりました。
Stoyan Stefanov が、ファイルを実行せずにロードする方法を簡潔に説明しています。元のテキストは、http://www.phpied.com/preload-cssjavascript-without-execution/
にあります。具体的な方法は、次の場所で new Image().src を使用することです。 IE ではファイルをプリロードしますが、他のブラウザでは動的に挿入された
window.onload = function () {
var i = 0,
max = 0,
o = null,
// プリロードするもののリスト
preload = [
'http://tools.w3clubs.com/pagr2/.sleep.expires.png',
'http://tools .w3clubs.com/pagr2/ .sleep.expires.js',
'http://tools.w3clubs.com/pagr2/.sleep.expires .css'
],
isIE = navigator.appName.indexOf('Microsoft') === 0;
for (i = 0, max = プリロード) .length; i
if (isIE) {
preload[i]; >o = document.createElement( 'object');
o.data = preload[i];
// IE のもの、それ以外の場合は 0x0 でOK
//o.width = 1;
//o.height = 1;
//o.style.visibility = "hidden"; // IE
o.width = 0;
o .height = 0;
// FF のみが先頭に追加されます
// 他のすべてはボディを必要とします
document.body.appendChild(o); }
};
デモが利用可能です
http://phpied.com/files/object-prefetch/page1.php?id=1
いくつかの注意事項:
1. new Image().src が ff で使用できない理由は、ff が画像用に別のキャッシュを実装しているためです。 同時に、safariとchromeはキャッシュされないようです。
2. 動的に挿入されたオブジェクト タグは、読み込みをトリガーするために非ヘッド部分に挿入される必要があります。
3. ie7 ie8 は、動的オブジェクトを使用して、コードを通じてファイルをロードすることもできます (コードのコメントに記載されています)。しかし、著者は、このオブジェクトは通常、多額のお金を消費するため、...
彼自身の実験を通じて、困っている学生はそれを試してみるとよいことがわかりました。 。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
