mvc 完成异步脚本加载答案

【问题标题】：Mvc complete asynchronous scripts loadingmvc 完成异步脚本加载
【发布时间】：2016-03-26 05:05:02
【问题描述】：

我的网页上的异步加载脚本有一个小问题。我需要异步加载页面的所有脚本。我尝试了很多程序，我在google上找到了，但仍然不完美。

现在我是这样的：

将所有脚本从布局拆分为一个包，包括 jquery。
在页面底部调用带有异步标记的 RenderFormat。
现在我遇到了问题：我需要解决以下情况脚本由@RenderFormat 呈现。问题是那些脚本的渲染时间比我需要的早。

例如我在 Home/Index 文件中有这个：

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

或者干脆

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

这里我们得到错误，“$ is not defined”，因为 jquery 还没有加载。

在内容之后，在布局文件中我有：

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

如果我将页面上的所有脚本都放在一个包中，一切都很好，但我不希望脚本被渲染，我只需要在特定部分执行此操作。

下一个想法是创建一个自定义的 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...
});

有没有办法，怎么解决？非常感谢您的宝贵时间。

【问题讨论】：

标签： javascript c# asp.net-mvc

【解决方案1】：

好的，解决了。

布局中有我当前的脚本：

...

 @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 async 中创建新的回调就可以了。

谢谢大家

【讨论】：