8

ページが読み込まれた後に大きな JS ファイルをプリロードしたいので、必要なページでその JS ファイルにリンクすると、すでにダウンロードされてキャッシュされます。

私は基本的に現時点でこれを行っており、動作しますが、もちろん正しい方法ではありません:

preload_js = new Image();
preload_js = "http://domain.com/files/file.js";

これは非常に迅速で簡単な方法のようで、Ajax は必要ありません。

これを行う適切な方法は何ですか？これはやり過ぎに思えるので、確かにAjaxではそうではありません。

JS をロードする方法がたくさんあることは知っていますが、それらはすべて、スクリプトがロードされた後に実際にコードを実行しているように見えますが、これは望ましくありません。

私は jQuery (または任意のライブラリ) を使用したくありません。プレーンな JS でなければなりません。助けてくれてありがとう。

4

3 に答える 3

3

このブログ投稿から：

コンポーネントを事前にプリロードすると、パフォーマンスが向上します。それにはいくつかの方法があります。しかし、最もクリーンなソリューション (iframe を開き、そこで夢中になる) でさえ、iframe の代償と、プリロードされた CSS および JavaScript の解析と実行の代償が伴います。また、プリロードするスクリプトが、プリロードするページとは異なるページにロードされていると想定している場合、潜在的な JavaScript エラーのリスクが比較的高くなります。

少し試行錯誤した後、クロスブラウザで動作するものを思いついたと思います：

  • IE ではnew Image().src、すべてのコンポーネント タイプをプリロードするために使用します
  • 他のすべてのブラウザでは動的<object>タグを使用します

この例では、次のページで必要になるいくつかのコンポーネントをオンロードした後に、ページがプリフェッチされると想定しています。コンポーネントは、CSS、JS、および PNG (スプライト) です。

window.onload = function () {

    var i = 0,
        max = 0,
        o = null,

        // list of stuff to preload
        preload = [
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js',
            'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css'
        ],
        isIE = navigator.appName.indexOf('Microsoft') === 0;

    for (i = 0, max = preload.length; i < max; i += 1) {

        if (isIE) {
            new Image().src = preload[i];
            continue;
        }
        o = document.createElement('object');
        o.data = preload[i];

        // IE stuff, otherwise 0x0 is OK
        //o.width = 1;
        //o.height = 1;
        //o.style.visibility = "hidden";
        //o.type = "text/plain"; // IE 
        o.width  = 0;
        o.height = 0;


        // only FF appends to the head
        // all others require body
        document.body.appendChild(o);
    }

};

詳しくは投稿をご覧ください。

編集:その投稿のコメントを見ると、誰かがこのリンクnew Image()に言及しています。これは、IE や他のブラウザーのプリロード方法の問題について語っています。ここに抜粋があります：

IE は IMG タグを検出すると、画像オブジェクトを作成し、ダウンロード要求をそれに割り当てます。画像のダウンロードからデータが到着すると、ブラウザーの画像デコーダーに送られます。デコーダーは、プレーンテキストを入力すると、不正な形式のデータとして拒否しますが、これは合理的であると思われます。デコーダーがデータを「画像ではない可能性がある」として拒否すると、画像オブジェクトはその処理を中止します。その中断の一部として、ダウンロードがまだ完了していない場合は、ダウンロードも中断されます。

これは、以下のコメントでOPが言及した動作を説明しています（IE9は4KBのファイルのみをダウンロードします）。

信頼できるクロスブラウザの唯一のオプションは、Ajax を使用することのようです...

于 2013-05-17T05:37:18.843 に答える
1

Ajax のクロスドメインの問題を考慮すると、特に制御できないサーバー (jQuery をホストする Google CDN など) にファイルをロードする方法は実際には存在しないため、これが私の解決策です。

(1) Firefox 用の Simon M のソリューションで document.createElement('object') 部分を使用すると、うまく機能します。

(2) 他のすべてのブラウザで新しい Image.src を使用します。Opera、Safari、Chrome が気に入っています。また、Mobile Safari が動作しないことは前述しました。うまくいきますが、何らかの理由で何かを検証するのに 100 ミリ秒かかります (適切にキャッシュされており、変更されていない 304 を返すだけではありません)。私は100ミリ秒で生きることができます。

他のモバイル ブラウザはテストしていません。

(3) 何も機能しないため、IE にブロックします。

于 2013-05-20T15:30:31.927 に答える