Mvcの完全な非同期スクリプトの読み込み

debugcn 投稿 Dev

PetrTomášek

Webページでの非同期読み込みスクリプトに小さな問題があります。ページのすべてのスクリプトを非同期でロードする必要があります。私はグーグルで見つけた多くの手順を試しましたが、それでも完璧ではありません。

今私はこのようにそれを持っています：

すべてのスクリプトをレイアウトからjqueryを含む1つのバンドルに分割します。
ページの下部で、asyncタグを使用してRenderFormatを呼び出します。
ここで問題が発生します。スクリプトが@RenderFormatによってレンダリングされている状況を解決する必要があります。問題は、これらのスクリプトが必要以上に早くレンダリングされていることです。

たとえば、私はこれをホーム/インデックスファイルに持っています：

@Scripts.RenderFormat("<script async type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/raphael")

または単に

...
$(".datapicker").datapicker();
...

ここでは、jqueryがまだロードされていないため、「$が定義されていません」というエラーが発生します。

コンテンツの後、レイアウトファイルには次のものがあります。

...
@Scripts.RenderFormat("<script async type=\"text/javascript\" src=\"{0}\"></script>", "~/bundles/frontall")
...
@RenderSection("scripts", required: false)

ページ上のすべてのスクリプトを1つのバンドルにまとめると、すべて問題ありませんが、スクリプトをレンダリングしたくないので、特定のセクションでのみ実行する必要があります。

次のアイデアは、次のような操作を行うカスタムRenderSectionメソッドを作成することでした。

    function async(u, c) {
    var d = document, t = 'script',
        o = d.createElement(t),
        s = d.getElementsByTagName(t)[0];
    o.src = u;
    if (c) { o.addEventListener('load', function (e) { c(null, e); }, false); }
    s.parentNode.appendChild(o, s);
}

async("/bundles/jquery", function() {
    //here, load scripts from inner pages. Index, Detail...
});

それを解決する方法はありますか？どうもありがとうございました。

PetrTomášek

わかった、解決した。

レイアウトに私の現在のスクリプトがあります：

...

 @RenderSection("scripts", required: false)

    <script>

    function async(u, c, css) {
        var t = 'script';
        var element = document.createElement(t);
        var s = document.getElementsByTagName(t)[0];
        element.src = u;

        if (css) {
            t = "link";
            element = document.createElement(t);
            element.href = u;
            element.rel = 'stylesheet';
            element.src = null;
            var head = document.getElementsByTagName('head')[0];
            head.appendChild(element, head);

            return;
        }

        if (c) { element.addEventListener('load', function (e) { c(null, e); }, false); }
        s.parentNode.appendChild(element, s);
    }

    function initScripts() {
        async("/content/css", null, true);
        async("/bundles/jquery", function () {
            @RenderSection("asyncScripts", required: false)
        });
    }

    if (window.addEventListener) {
        window.addEventListener("load", function () {
            initScripts();
        }, false);
    }
    else if (window.attachEvent) {
        window.attachEvent("onload", function () {
            initScripts();
        });
    } else {
        window.onload = function () {
            initScripts();
        };
    }

</script>

そして他のファイルで。（インデックス、詳細...）

@section scripts {
   <script type="text/javascript">
    var czech_republic = {};
    window.selectedRegions = [];

    czech_republic.regions = {
        @Html.Raw(string.Join(", ", regions.Select(r => string.Format("\"{0}\": \"{1}\"", r.RaphaelId, r.RaphaelCoordinates))))
    };

</script>
@section asyncScripts {
    @Scripts.RenderFormat("async(\"{0}\");", "~/bundles/raphael");
}

たとえば、raphaelの後で、次のスクリプトを呼び出す必要がある場合は、renderformat asyncaで新しいコールバックを作成するだけです。

ありがとうございます

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]