我的网页上的异步加载脚本有一个小问题。 我需要异步加载页面的所有脚本。我尝试了很多在 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...
});
有没有办法,怎么解决? 非常感谢您的宝贵时间。
最佳答案
好的,解决了。
布局中有我当前的脚本:
...
@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 中创建新的回调即可。
感谢大家
关于javascript - Mvc完成异步脚本加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34373391/