Javascript HTML加载顺序和动态添加的JS文件_Javascript_Html

Javascript HTML加载顺序和动态添加的JS文件

javascript html

Javascript HTML加载顺序和动态添加的JS文件,javascript,html,Javascript,Html,我将一些JS文件动态添加到我的HTML头中，我想保证我的JS文件在继续渲染我的身体之前完成加载。加载或DOMContentLoaded等事件在加载完成后触发。我的身体需要添加的脚本来正确渲染，但在文件完全加载之前就开始了代码段： ... <script> $.ajax({ type: "Get", url: '@Url.Action("GetL

我将一些JS文件动态添加到我的HTML头中，我想保证我的JS文件在继续渲染我的身体之前完成加载。
加载或DOMContentLoaded等事件在加载完成后触发。
我的身体需要添加的脚本来正确渲染，但在文件完全加载之前就开始了

代码段：

    ...
    <script>

            $.ajax({
                type: "Get",
                url: '@Url.Action("GetLocalisationFiles", "Localisation")',
                success: function (response) {
                        for (var file in response) {
                            var scriptName = response[file];
                            //Adding of the script(s)
                            let myScript = document.createElement("script");
                            myScript.setAttribute("src", scriptName);
                            document.head.appendChild(myScript);
                            //
                        }
                }
            });

        window.addEventListener("load", LocalizationAdded);
        function LocalizationAdded(e) {
            alert("JS Files Finished Loading");
            DevExpress.localization.loadMessages(RddsDataNavigator_LanguagePack_en);

        }
    </script>
</head>

<body class="dx-viewport">
    <script>
        alert("Body Started"); 
        ...

。。。
$.ajax({
键入：“获取”，
url:'@url.Action（“GetLocalizationConfigles”，“Localization”），
成功：功能（响应）{
for（响应中的var文件）{
var scriptName=响应[文件]；
//添加脚本
让myScript=document.createElement（“脚本”）；
setAttribute（“src”，scriptName）；
document.head.appendChild（myScript）；
//
}
}
});
window.addEventListener（“加载”，本地化已添加）；
新增功能本地化（e）{
警报（“JS文件已完成加载”）；
DevExpress.localization.loadMessages（RddsDataNavigator\u LanguagePack\u en）；
}
警报（“身体启动”）；
...

在渲染身体之前是否有其他事件或延迟我的身体渲染的简单方法？
我知道我可以在加载完成后手动添加依赖于添加脚本的所有内容，但这似乎很模糊。
JS的动态添加按预期工作。我的问题在发生的顺序之内

提前谢谢你的帮助

上一个问题：

我们可以质疑，在用户操作之后加载脚本是否是一个好主意。如果您真的想拥有一页的体验，您可以从服务器加载相关的HTML内容（可能包括脚本标记），或者启动一个导航，服务器将通过HTTP请求获得关于下一步生成什么的线索

但是，如果我们坚持这种模式，我建议使用脚本元素的

onload

属性，并使用承诺等待所有脚本加载

下面是一些您可以使用的代码。此演示在AJAX调用返回响应后加载两个JS文件：一个用于immutablejs库，另一个用于momentjs库

当脚本的

load

事件触发时，

newpromise

将解析，而

Promise.all

将在所有脚本发生此情况时解析

为了演示的目的，我用一个mock替换了URL，并篡改了响应，以便生成您所拥有的响应：

//虚拟服务器，仅用于演示
让url=”https://jsonplaceholder.typicode.com/todos/1";
log（“启动初始HTTP请求…”）；
$.get（url）.then（函数（响应）{
log（“已收到响应。正在加载脚本…”）；
//用模拟数据覆盖响应：
答复={
不变的：https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.2/immutable.min.js",
时刻：“https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.0/moment.min.js"
};
返回Promise.all（Object.values（response.map）（函数（scriptName））{
返回新承诺（函数（解析、拒绝）{
//添加脚本
让myScript=document.createElement（“脚本”）；
setAttribute（“src”，scriptName）；
myScript.onload=解析；
myScript.onerror=拒绝；
document.head.appendChild（myScript）；
//
});
}));
}).然后（函数（）{
//所有依赖于加载脚本的代码都应该在这里，或者从这里调用
log（“加载的所有脚本：”）；
log（“不可变：”，typeof Immutable）；
console.log（“力矩：，力矩类型）；
});
为什么需要调用AJAX来获取脚本列表？在服务器端生成HTML时，您不能获得相同的脚本列表吗？旁注：async:false
已被弃用。我是Web开发新手。我使用ASP.NET核心和MVC模板。我想如果我在服务器端预构建文件，它将解决我所有的问题，但我不知道如何做到这一点。在web开发中，为了更快地加载页面，每个人都在尽可能避免页面呈现的阻塞。你想实现反方向：）玩笑放在一边，我不认为使用AJAX获取要加载的JS文件列表是解决方案。我不容易想到这样一个用例，即该解决方案比在服务器端包含那些脚本标记更可取/更容易。