可以推迟加载jQuery吗？
让我们面对它，jQuery/jQuery-ui是一个沉重的下载。
谷歌推荐使用deferred loading of JavaScript来加速初始渲染。我的页面使用jQuery来设置一些标签，这些标签放在页面的下方(大多数不在初始视图之外)，我想将jQuery推迟到页面呈现之后。
谷歌的延迟代码通过挂接到body onLoad事件，在页面加载后向DOM添加了一个标记：
<script type="text/javascript">
// Add a script element as a child of the body
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "deferredfunctions.js";
document.body.appendChild(element);
}
// Check for browser support of event handling capability
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>我想以这种方式推迟加载jQuery，但当我尝试它时，我的jQuery代码找不到jQuery (这对我来说并不完全出乎意料)：
$(document).ready(function() {
$("#tabs").tabs();
});因此，我似乎需要找到一种方法，将我的jQuery代码的执行推迟到加载jQuery之后。如何检测添加的标签是否已完成加载和解析？
作为推论，asynchronous loading似乎也可能包含一个答案。
有什么想法吗？
回答 15
Stack Overflow用户
发布于 2011-05-02 12:03:17
试试这个，这是我不久前从jQuerify书签小程序编辑的内容。我经常使用它来加载jQuery，并在加载之后执行一些东西。当然，您也可以将那里的url替换为您自己的自定义jquery的url。
(function() {
function getScript(url,success){
var script=document.createElement('script');
script.src=url;
var head=document.getElementsByTagName('head')[0],
done=false;
script.onload=script.onreadystatechange = function(){
if ( !done && (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') ) {
done=true;
success();
script.onload = script.onreadystatechange = null;
head.removeChild(script);
}
};
head.appendChild(script);
}
getScript('http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js',function(){
// YOUR CODE GOES HERE AND IS EXECUTED AFTER JQUERY LOADS
});
})();我真的会将jQuery和jQuery-UI合并到一个文件中，并使用指向它的url。如果你真的想单独加载它们，只需链接getScripts：
getScript('http://myurltojquery.js',function(){
getScript('http://myurltojqueryUI.js',function(){
//your tab code here
})
});Stack Overflow用户
发布于 2013-08-23 22:34:17
由于这是一个重要主题的排名最高的问题，让我大胆地根据@valmarv和@amparsand之前的回答提供我自己的看法。
我使用多维数组来加载脚本。将它们之间没有依赖关系的那些分组在一起：
var dfLoadStatus = 0;
var dfLoadFiles = [
["http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"],
["http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js",
"/js/somespecial.js",
"/js/feedback-widget.js#2312195",
"/js/nohover.js"]
];
function downloadJSAtOnload() {
if (!dfLoadFiles.length) return;
var dfGroup = dfLoadFiles.shift();
dfLoadStatus = 0;
for(var i = 0; i<dfGroup.length; i++) {
dfLoadStatus++;
var element = document.createElement('script');
element.src = dfGroup[i];
element.onload = element.onreadystatechange = function() {
if ( ! this.readyState ||
this.readyState == 'complete') {
dfLoadStatus--;
if (dfLoadStatus==0) downloadJSAtOnload();
}
};
document.body.appendChild(element);
}
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;它首先加载jquery，加载后立即继续加载其他脚本。您可以通过添加到页面上任意位置的数组来轻松添加脚本：
dfLoadFiles.push(["/js/loadbeforeA.js"]);
dfLoadFiles.push(["/js/javascriptA.js", "/js/javascriptB.js"]);
dfLoadFiles.push(["/js/loadafterB.js"]);Stack Overflow用户
发布于 2017-01-31 07:38:00
下面是对modern approach for async/defer javascript loading的一个很好的描述。但它不适用于内联脚本
<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" defer>
$(function () { // <- jquery is not yet initialized
...
});
</script>异步加载的最简单的解决方案是@nilskp - externalize script：
<script type="text/javascript" src="/jquery/3.1.1-1/jquery.min.js" defer></script>
<script type="text/javascript" src="resources/js/onload.js" defer></script>https://stackoverflow.com/questions/5852767
复制相似问题