1

Web ページに JavaScript タグが埋め込まれてい<head>ます。このスクリプト (Amazon Cloudfront 経由で提供) では、いくつかの処理を行い、特定のチェックが設定されている場合は、別のスクリプトをドキュメント ヘッドに追加します。その埋め込みの例を次に示します。

    var js = document.createElement('script');
    js.src = 'http://cdn.mysite.com/script.js?cache_bust='+Math.random();
    document.getElementsByTagName('head')[0].appendChild(js);

これは適切に機能しますが、ノンブロッキングであるため、スクリプトがヘッドに追加されている間も Web ページがロードされ続けます。

新しいスクリプトのセットアップ中に Web ページが「ハング」するように、スクリプトをブロックする方法で埋め込む方法はありますか?

最初のスクリプトをタグのすぐ下に移動してから<body>、2 番目のスクリプトで document.write() を使用することを考えていましたが、<head>.

何か案は？ありがとう！

4

2 に答える 2

1

私が作成したこのスクリプトローダーのようなものを使用してください：

    var scriptLoader = [];

    /*
    * loads a script and defers a callback for when the script finishes loading.
    * you can also just stack callbacks on the script load by invoking this method repeatedly.
    *
    * opts format:  {
    *       url: the url of the target script resource,
    *       timeout: a timeout in milliseconds after which any callbacks on the script will be dropped, and the script element removed.
    *       callbacks: an optional array of callbacks to execute after the script completes loading.
    *       callback: an optional callback to execute after the script completes loading.
    *       before: an optional callback to execute before the script is loaded, only intended to be ran prior to requesting the script, not multiple times.
    *       success: an optional callback to execute when the script successfully loads, always remember to call script.complete at the end.
    *       error: an optional callback to execute when and if the script request fails.
    *   }
    */
    function loadScript(opts) {
        if (typeof opts === "string") {
            opts = {
                url: opts
            };
        }
        var script = scriptLoader[opts.url];
        if (script === void 0) {
            var complete = function (s) {
                s.status = "loaded";
                s.executeCallbacks();
            };

            script = scriptLoader[opts.url] = {
                url: opts.url,
                status: "loading",
                requested: new Date(),
                timeout: opts.timeout || 10000,
                callbacks: opts.callbacks || [opts.callback || $.noop],
                addCallback: function (callback) {
                    if (!!callback) {
                        if (script.status !== "loaded") {
                            script.callbacks.push(callback);
                        } else {
                            callback();
                        }
                    }
                },
                executeCallbacks: function () {
                    $.each(script.callbacks, function () {
                        this();
                    });
                    script.callbacks = [];
                },
                before: opts.before || $.noop,
                success: opts.success || complete,
                complete: complete,
                error: opts.error || $.noop
            };

            script.before();

            $.ajax(script.url, {
                timeout: script.timeout,
                success: function () {
                    script.success(script);
                },
                error: function () {
                    script.error(); // .error should remove anything added by .before
                    scriptLoader[script.url] = void 0; // dereference, no callbacks were executed, no harm is done.
                }
            });
        } else {
            script.addCallback(opts.callback);
        }
    }

    loadScript({
        url: 'http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js',
        callback: function(){
            alert('foo');
        }
    });

一般的に言えば、ブロックするのではなく実行を延期して、ユーザーが知覚するページの読み込み速度を上げる必要があります。

于 2013-01-19T16:03:09.987 に答える
1

そうです、document.writeうまくいくはずです。Dr.Molle がコメントで述べたように、内部でも使用できます<head>(これも<head>ドキュメントの一部です!)。

そう：

<head>
    <script>
    var src = 'http://cdn.mysite.com/script.js?cache_bust='+Math.random();
    document.write '<script src="">'+ src + '</scr' + 'ipt>';
    </script>
</head>

この'</scr' + 'ipt>'部分は予防措置です。ブラウザーは通常、文字列内であっても を見つけると、外側のスクリプト ブロックが閉じられていると</script>見なします。

于 2013-01-19T15:59:08.777 に答える