我已将async attrib添加到我的javascript包含HTML中
所以我现在：
<script async src="jquery.myscript.js"></script>
这适用于所有JS我加载，除了jquery。
如果我将async添加到jQuery <script>标记，则依赖于jquery的所有其他脚本都不起作用。
在那个jsfiddle你可以看到问题：
JsFiddle
在示例中，我使用了<script> Mycode </script>而不是包含外部file.js，但这并没有改变这种情况。
我想用异步attrib运行jQuery，并且只有在加载jquery之后才异步运行其他几个外部脚本。
有可能吗？
答案 0 :(得分：23)
我想用异步attrib运行jQuery并运行其他几个外部 只有在加载jquery之后才会异步编写脚本。
这是什么意思？这听起来很像你想先加载jQuery，然后是其他的东西。所以你想加载它同步。如果您仍想使用async方式，则可以定义onload函数，以便在jQuery准备就绪后继续加载其他内容。或者您可以使用defer。这两个都在这里解释：https://davidwalsh.name/html5-async
答案 1 :(得分：16)
这是defer的一个很好的用例：
<script defer src="jquery.js"></script>
<script defer src="custom.js"></script>
这些标签都不会阻止渲染。浏览器可以并行下载jquery.js和custom.js。一旦下载并且已加载DOM，它将立即执行jquery.js，之后将执行custom.js。
可悲的是，有一些问题：
defer属性用于内联脚本。defer到unexpectedly interleave their execution的脚本。defer命令的脚本按顺序执行，只是说它们是在DOM加载后执行的。答案 2 :(得分：14)
这可能是您正在寻找的：
http://www.yterium.net/jQl-an-asynchronous-jQuery-Loader - jQl是一个异步jQuery Loader。
它异步加载jQuery而不阻塞其他组件：
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
jQl自动捕获所有jQuery().ready()个调用，因此您可以编写：
<script type="text/javascript">
jQl.loadjQ('http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js');
jQuery('document').ready(function(){
alert('Hello world');
});
</script>
jQl将对这些函数调用进行排队，并在加载jQuery并且DOM准备好后立即执行它们，因为它们将以通常的方式执行。
答案 3 :(得分：3)
我写了一个很好的工作来完成这项工作。
> table(Y_train)
Y_train
0 1
2434 422
您可以将这些代码放在// scripts.js
function loadScripts(urls, length, success){
if(length > 0){
script = document.createElement("script");
script.src = urls[length-1];
console.log();
script.onload = function() {
console.log('%c Script: ' + urls[length-1] + ' loaded!', 'color: #4CAF50');
loadScripts(urls, length-1, success);
};
document.getElementsByTagName("head")[0].appendChild(script);
}
else{
if(success){
success();
}
}
}
/* Write links sorted from last one to first to load */
/* Here, jquery will be loaded first, then materialize and then wow libray. */
urls = [ '/js/wow.js', '/js/materialize.js', '/js/jquery.js'];
loadScripts(urls, urls.length, function(){
/* Codes inside of here will be executed after js files load */
});
这样的文件中，并使用scripts.js属性加载它。
async对于css异步加载，请参阅此答案的已编辑版本。
答案 4 :(得分：-1)
<script>var JSdep = [
["//ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.4.min.js", "window.jQuery", "/bundle/jquery"],
["//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js", "self.framework === 'bootstrap'", "/bundle/bootstrap"],
["//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js", "window.jQuery && window.jQuery.ui && window.jQuery.ui.version === '1.12.1'", "/bundle/jqueryui"],
["//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js", "window.jQuery && window.jQuery.fn.selectpicker", "/bundle/bootstrap-select"],
]
</script>
<script type="text/javascript">
var downloadJSAtOnload = function (e) {
var src = e.srcElement.src.toString();
//console.log("[jquery] loaded", src);
for (var i = 0; i < JSdep.length; i++) {
if (src.indexOf(JSdep[i][0]) !== -1) {
if ((!JSdep[i][1]) || (eval(JSdep[i][1]))) {
console.log("[jquery] loaded ok", src);
break;
} else {
console.log("[jquery] fail", src);
return;
}
}
}
if (i === JSdep.length) {
console.log("[jquery] fallback loaded ok", src);
}
if (jqloaded) {
return;
}
jqloaded = true;
for (var i = 1; i < JSdep.length; i++) {
//console.log("[jquery] loading", JSdep[i][0], JSdep[i][1], JSdep[i][2]);
var raf2 = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf2) { window.setTimeout(dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]), 0); }
else window.addEventListener('load', dljquery([JSdep[i][0], JSdep[i][1], JSdep[i][2]]));
}
}
var downloadJSAtOnerror = function (e) {
var src = e.srcElement.src.toString();
console.log("[jquery] error", src);
for (var i = 0; i < JSdep.length; i++) {
if (src.indexOf(JSdep[i][0]) !== -1) {
console.log("[jquery] failed try fallback", src);
dljquery([JSdep[i][2], JSdep[i][1]]);
return;
}
}
console.log("[jquery] failed on fallback", src);
return;
}
// Add a script element as a child of the body
var dljquery = function (src) {
//console.log("[jquery] start", src);
var element = document.createElement("script");
element.src = src[0];
element.async = "async";
try {
document.body.appendChild(element);
} catch (err) {
console.log("[jquery] err", err);
}
if (element.addEventListener) {
element.addEventListener("load", downloadJSAtOnload, false);
element.addEventListener("error", downloadJSAtOnerror, false);
} else if (element.attachEvent) {
element.attachEvent("onload", downloadJSAtOnload);
element.attachEvent("onerror", downloadJSAtOnerror);
} else {
element.onload = downloadJSAtOnload;
element.onerror = downloadJSAtOnerror;
}
}
// var fb = "/bundle/jquery";
var raf = requestAnimationFrame || mozRequestAnimationFrame ||
webkitRequestAnimationFrame || msRequestAnimationFrame;
if (raf) raf(function () { window.setTimeout(dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]), 0); });
else window.addEventListener('load', dljquery([JSdep[0][0], JSdep[0][1], JSdep[0][2]]));
var jqloaded = false;
function doOnload() {
console.log("[jquery] onload");
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", doOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", doOnload);
else window.onload = doOnload;
</script>
找到了它 我有时在jquery之前遇到bootstrap加载问题 现在np希望它能帮助别人 我把这个脚本放在头上，但是给出了一个错误，但是现在还没有追上它 / body和checked适用于我尝试过脚本的所有浏览器 异步但它没有一个事件告诉我下载何时结束 有时候在jquery之前加载bootstrap，反之亦然，因为 bootstrap依赖于jquery我必须加载jquery然后启动 现在下载bootstrap我将添加后备
修好了
现在它检查jq加载
然后才加载其他人
现在可以复制粘贴