検索

ホームページ >ウェブフロントエンド >jsチュートリアル >css または javascript_javascript の js コードをプリロードするヒント

css または javascript_javascript の js コードをプリロードするヒント

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBオリジナル
2016-05-16 18:28:501154ブラウズ

一般に、ファイルをプリロードするには、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 は、動的オブジェクトを使用して、コードを通じてファイルをロードすることもできます (コードのコメントに記載されています)。しかし、著者は、このオブジェクトは通常、多額のお金を消費するため、...


彼自身の実験を通じて、困っている学生はそれを試してみるとよいことがわかりました。 。

声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
前の記事：JavaScript オブジェクトチェーン動作テスト code_js オブジェクト指向次の記事：JavaScript オブジェクトチェーン動作テスト code_js オブジェクト指向

関連記事

続きを見る