我正在使用几个插件，自定义小部件和一些来自JQuery的其他库。结果我有几个.js和.css文件。我需要为我的网站创建一个加载器，因为它需要一些时间来加载。如果我能在导入所有内容之前显示加载器，那将是很好的：
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/myFunctions.js"></script>
<link type="text/css" href="css/main.css" rel="stylesheet" />
...
....
etc
我找到了几个教程，可以让我以异步方式导入JavaScript库。例如，我可以做类似的事情：
(function () {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'js/jquery-ui-1.8.16.custom.min.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
})();
出于某种原因，当我对我的所有文件做同样的事情时，页面不起作用。我一直在努力试图找到问题的所在，但我找不到它。首先我认为这可能是因为一些javascript函数依赖于其他函数。但是我使用超时功能以正确的顺序加载它们，当一个完成后我继续下一个并且页面仍然表现得很奇怪。例如，我无法点击链接等...动画仍然可以工作..
以下是我一直在想的...我相信浏览器有一个缓存，这就是为什么第一次加载页面需要很长时间以及下次快速加载页面的原因。所以我想要做的是用一个异步加载所有这些文件的页面替换我的index.html页面。当ajax完成后，将所有这些文件重定向到我计划使用的页面。使用该页面时，加载时间不应太长，因为文件应该包含在浏览器的缓存中。在我的索引页面（异步加载.js和.css文件的页面）我不关心错误。我将只显示一个加载器并在完成后重定向页面...
这个想法是一个不错的选择吗？或者我应该继续尝试实现异步方法吗？
我加载所有异步的方式就像：
importScripts();
function importScripts()
{
//import: jquery-ui-1.8.16.custom.min.js
getContent("js/jquery-1.6.2.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
//s.async = true;
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext1,1);
});
//import: jquery-ui-1.8.16.custom.min.js
function insertNext1()
{
getContent("js/jquery-ui-1.8.16.custom.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext2,1);
});
}
//import: jquery-ui-1.8.16.custom.css
function insertNext2()
{
getContent("css/custom-theme/jquery-ui-1.8.16.custom.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext3,1);
});
}
//import: main.css
function insertNext3()
{
getContent("css/main.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext4,1);
});
}
//import: jquery.imgpreload.min.js
function insertNext4()
{
getContent("js/farinspace/jquery.imgpreload.min.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext5,1);
});
}
//import: marquee.js
function insertNext5()
{
getContent("js/marquee.js",function (code) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext6,1);
});
}
//import: marquee.css
function insertNext6()
{
getContent("css/marquee.css",function (code) {
var s = document.createElement('link');
s.type = 'text/css';
s.rel ="stylesheet";
s.innerHTML=code;
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
setTimeout(insertNext,1);
});
}
function insertNext()
{
setTimeout(pageReadyMan,10);
}
}
// get the content of url and pass that content to specified function
function getContent( url, callBackFunction )
{
// attempt to create the XMLHttpRequest and make the request
try
{
var asyncRequest; // variable to hold XMLHttpRequest object
asyncRequest = new XMLHttpRequest(); // create request object
// register event handler
asyncRequest.onreadystatechange = function(){
stateChange(asyncRequest, callBackFunction);
}
asyncRequest.open( 'GET', url, true ); // prepare the request
asyncRequest.send( null ); // send the request
} // end try
catch ( exception )
{
alert( 'Request failed.' );
} // end catch
} // end function getContent
// call function whith content when ready
function stateChange(asyncRequest, callBackFunction)
{
if ( asyncRequest.readyState == 4 && asyncRequest.status == 200 )
{
callBackFunction(asyncRequest.responseText);
} // end if
} // end function stateChange
和奇怪的部分是所有风格的工作加上所有的javascript函数。由于某种原因，页面被冻结了......
答案 0 :(得分：157)
一对异步加载的解决方案：
//this function will work cross-browser for loading scripts asynchronously
function loadScript(src, callback)
{
var s,
r,
t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
s.onload = s.onreadystatechange = function() {
//console.log( this.readyState ); //uncomment this line to see which ready states are called.
if ( !r && (!this.readyState || this.readyState == 'complete') )
{
r = true;
callback();
}
};
t = document.getElementsByTagName('script')[0];
t.parentNode.insertBefore(s, t);
}
如果您已经在页面上使用了jQuery，请使用：
$.getScript(url, successCallback) *
此外，在文档加载之前，您的脚本可能正在加载/执行，这意味着您需要等待document.ready才能将事件绑定到元素。
如果没有看到代码，就不可能具体说出你的问题。
最简单的解决方案是将所有脚本保持在页面底部，这样他们就不会在执行时阻止加载HTML内容。它还避免了必须异步加载每个必需脚本的问题。
如果你有一个特别花哨的交互并不总是需要某种类型的更大的脚本，那么避免在需要之前加载特定的脚本（延迟加载）会很有用。
* scripts loaded with $.getScript will likely not be cached
对于任何可以使用Promise对象等现代功能的人来说，loadScript功能变得非常简单：
function loadScript(src) {
return new Promise(function (resolve, reject) {
var s;
s = document.createElement('script');
s.src = src;
s.onload = resolve;
s.onerror = reject;
document.head.appendChild(s);
});
}
请注意，此版本不再接受callback参数，因为返回的promise将处理回调。以前的loadScript(src, callback)现在是loadScript(src).then(callback)。
这具有能够检测和处理故障的额外好处，例如可以调用...
loadScript(cdnSource)
.catch(loadScript.bind(null, localSource))
.then(successCallback, failureCallback);
......它可以优雅地处理CDN中断。
答案 1 :(得分：29)
HTML5的新“异步”属性应该可以解决问题。如果你关心IE，大多数浏览器也支持'defer'。
异步 - HTML
<script async src="siteScript.js" onload="myInit()"></script>
延迟 - HTML
<script defer src="siteScript.js" onload="myInit()"></script>
在分析新的adsense广告单元代码时，我注意到该属性和搜索引导我：http://davidwalsh.name/html5-async
答案 2 :(得分：7)
我异步加载脚本（html 5具有该功能）当所有完成加载的脚本我将页面重定向到index2.html，其中index2.html使用相同的库。由于浏览器在页面重定向到index2.html后会有缓存，因此index2.html会在不到一秒的时间内加载，因为它只需要加载页面。在我的index.html页面中，我还加载了我计划使用的图像，以便浏览器将这些图像放在缓存中。所以我的index.html看起来像：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Project Management</title>
<!-- the purpose of this page is to load all the scripts on the browsers cache so that pages can load fast from now on -->
<script type="text/javascript">
function stylesheet(url) {
var s = document.createElement('link');
s.type = 'text/css';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
function script(url) {
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = url;
var x = document.getElementsByTagName('head')[0];
x.appendChild(s);
}
//load scritps to the catche of browser
(function () {
stylesheet('css/custom-theme/jquery-ui-1.8.16.custom.css');
stylesheet('css/main.css');
stylesheet('css/marquee.css');
stylesheet('css/mainTable.css');
script('js/jquery-ui-1.8.16.custom.min.js');
script('js/jquery-1.6.2.min.js');
script('js/myFunctions.js');
script('js/farinspace/jquery.imgpreload.min.js');
script('js/marquee.js');
})();
</script>
<script type="text/javascript">
// once the page is loaded go to index2.html
window.onload = function () {
document.location = "index2.html";
}
</script>
</head>
<body>
<div id="cover" style="position:fixed; left:0px; top:0px; width:100%; height:100%; background-color:Black; z-index:100;">Loading</div>
<img src="images/home/background.png" />
<img src="images/home/3.png"/>
<img src="images/home/6.jpg"/>
<img src="images/home/4.png"/>
<img src="images/home/5.png"/>
<img src="images/home/8.jpg"/>
<img src="images/home/9.jpg"/>
<img src="images/logo.png"/>
<img src="images/logo.png"/>
<img src="images/theme/contentBorder.png"/>
</body>
</html>
另一件好事是我可以在页面中放置一个加载器，当页面完成加载时，加载器将消失，并且在几毫秒的时间内将运行新页面。
答案 3 :(得分：6)
来自Google的示例
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js?onload=onLoadCallback';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script>
答案 4 :(得分：6)
几点说明：
s.async = true对于HTML5 doctype不是很正确，正确的是s.async = 'async'（实际使用true 是正确的，这要归功于amn指出的人它出现在comment正好在下面）由于最近有异步加载文件的原因，但是为了顺序，我建议在示例中使用更多功能驱动的方法（删除console.log以供生产使用:)）：
(function() {
var prot = ("https:"===document.location.protocol?"https://":"http://");
var scripts = [
"path/to/first.js",
"path/to/second.js",
"path/to/third.js"
];
function completed() { console.log('completed'); } // FIXME: remove logs
function checkStateAndCall(path, callback) {
var _success = false;
return function() {
if (!_success && (!this.readyState || (this.readyState == 'complete'))) {
_success = true;
console.log(path, 'is ready'); // FIXME: remove logs
callback();
}
};
}
function asyncLoadScripts(files) {
function loadNext() { // chain element
if (!files.length) completed();
var path = files.shift();
var scriptElm = document.createElement('script');
scriptElm.type = 'text/javascript';
scriptElm.async = true;
scriptElm.src = prot+path;
scriptElm.onload = scriptElm.onreadystatechange = \
checkStateAndCall(path, loadNext); // load next file in chain when
// this one will be ready
var headElm = document.head || document.getElementsByTagName('head')[0];
headElm.appendChild(scriptElm);
}
loadNext(); // start a chain
}
asyncLoadScripts(scripts);
})();
答案 5 :(得分：3)
感谢HTML5，您现在可以通过添加＆＃34; async＆＃34;来声明要异步加载的脚本。在标签中：
<script async>...</script>
注意：async属性仅适用于外部脚本（并且只应在存在src属性时使用）。
注意：有几种方法可以执行外部脚本：
答案 6 :(得分：2)
对于 HTML5，您可以使用“预取”
<link rel="prefetch" href="/style.css" as="style" />
看看 js 的“预加载”。
<link rel="preload" href="used-later.js" as="script">
答案 7 :(得分：2)
这是异步脚本加载的一个很好的当代解决方案，虽然它只用 async false 来解决js脚本。
有一篇很棒的文章写在 www.html5rocks.com - Deep dive into the murky waters of script loading。
在考虑了许多可能的解决方案后，作者得出结论，将js脚本添加到body元素的末尾是避免js脚本阻止页面呈现的最佳方法。
与此同时，作者为那些急需异步加载和执行脚本的人们添加了另一个好的替代解决方案。
考虑到您有四个名为script1.js, script2.js, script3.js, script4.js的脚本，您可以使用应用async = false 来执行此操作：
[
'script1.js',
'script2.js',
'script3.js',
'script4.js'
].forEach(function(src) {
var script = document.createElement('script');
script.src = src;
script.async = false;
document.head.appendChild(script);
});
现在，规范：一起下载，全部下载后立即执行。
Firefox＆lt; 3.6，Opera说：我不知道这个“异步”的东西是什么，但事实上我按照添加的顺序执行通过JS添加的脚本。
Safari 5.0说：我理解“异步”，但不明白用JS将其设置为“false”。我会在他们降落后立即以任何顺序执行你的脚本。
IE＆lt; 10说：不知道“异步”，但有一个使用“onreadystatechange”的解决方法。
其他一切都说：我是你的朋友，我们将在本书中做到这一点。
现在，IE的完整代码＆lt; 10解决方法：
var scripts = [
'script1.js',
'script2.js',
'script3.js',
'script4.js'
];
var src;
var script;
var pendingScripts = [];
var firstScript = document.scripts[0];
// Watch scripts load in IE
function stateChange() {
// Execute as many scripts in order as we can
var pendingScript;
while (pendingScripts[0] && ( pendingScripts[0].readyState == 'loaded' || pendingScripts[0].readyState == 'complete' ) ) {
pendingScript = pendingScripts.shift();
// avoid future loading events from this script (eg, if src changes)
pendingScript.onreadystatechange = null;
// can't just appendChild, old IE bug if element isn't closed
firstScript.parentNode.insertBefore(pendingScript, firstScript);
}
}
// loop through our script urls
while (src = scripts.shift()) {
if ('async' in firstScript) { // modern browsers
script = document.createElement('script');
script.async = false;
script.src = src;
document.head.appendChild(script);
}
else if (firstScript.readyState) { // IE<10
// create a script and add it to our todo pile
script = document.createElement('script');
pendingScripts.push(script);
// listen for state changes
script.onreadystatechange = stateChange;
// must set src AFTER adding onreadystatechange listener
// else we’ll miss the loaded event for cached scripts
script.src = src;
}
else { // fall back to defer
document.write('<script src="' + src + '" defer></'+'script>');
}
}
答案 8 :(得分：2)
我会通过检查是否存在回调来完成zzzzBov的回答并允许传递参数：
function loadScript(src, callback, args) {
var s, r, t;
r = false;
s = document.createElement('script');
s.type = 'text/javascript';
s.src = src;
if (typeof(callback) === 'function') {
s.onload = s.onreadystatechange = function() {
if (!r && (!this.readyState || this.readyState === 'complete')) {
r = true;
callback.apply(args);
}
};
};
t = document.getElementsByTagName('script')[0];
t.parent.insertBefore(s, t);
}
答案 9 :(得分：1)
我建议你看一下Modernizr。它是一个小型轻量级库，您可以异步加载javascript，其功能允许您检查文件是否已加载并在您指定的另一个脚本中执行脚本。
以下是加载jquery的示例：
Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.6.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);
答案 10 :(得分：1)
如果您在加载页面时运行所有脚本，那么您的脚本加载速度如此之慢的原因之一就是：
callMyFunctions();
而不是：
$(window).load(function() {
callMyFunctions();
});
在开始执行任何脚本之前，第二个脚本等待浏览器完全加载所有Javascript代码，使用户觉得页面加载速度更快。
如果您希望通过减少加载时间来增强用户体验，我不会选择“加载屏幕”选项。在我看来，这比让页面加载更慢更烦人。
答案 11 :(得分：1)
你可能会发现这篇wiki文章很有趣：http://ajaxpatterns.org/On-Demand_Javascript
它解释了如何以及何时使用这种技术。
答案 12 :(得分：1)
我写了一篇帖子来帮助解决这个问题，你可以在这里阅读更多https://timber.io/snippets/asynchronously-load-a-script-in-the-browser-with-javascript/，但我已经在下面附上了帮助类。它将自动等待脚本加载并返回指定的窗口属性。
export default class ScriptLoader {
constructor (options) {
const { src, global, protocol = document.location.protocol } = options
this.src = src
this.global = global
this.protocol = protocol
this.isLoaded = false
}
loadScript () {
return new Promise((resolve, reject) => {
// Create script element and set attributes
const script = document.createElement('script')
script.type = 'text/javascript'
script.async = true
script.src = `${this.protocol}//${this.src}`
// Append the script to the DOM
const el = document.getElementsByTagName('script')[0]
el.parentNode.insertBefore(script, el)
// Resolve the promise once the script is loaded
script.addEventListener('load', () => {
this.isLoaded = true
resolve(script)
})
// Catch any errors while loading the script
script.addEventListener('error', () => {
reject(new Error(`${this.src} failed to load.`))
})
})
}
load () {
return new Promise(async (resolve, reject) => {
if (!this.isLoaded) {
try {
await this.loadScript()
resolve(window[this.global])
} catch (e) {
reject(e)
}
} else {
resolve(window[this.global])
}
})
}
}
用法是这样的：
const loader = new Loader({
src: 'cdn.segment.com/analytics.js',
global: 'Segment',
})
// scriptToLoad will now be a reference to `window.Segment`
const scriptToLoad = await loader.load()
答案 13 :(得分：0)
查看此https://github.com/stephen-lazarionok/async-resource-loader。它有一个例子，展示如何一次性加载JS，CSS和多个文件。
答案 14 :(得分：0)
答案 15 :(得分：0)
这是我的自定义解决方案，可以消除渲染阻止JavaScript：
// put all your JS files here, in correct order
const libs = {
"jquery": "https://code.jquery.com/jquery-2.1.4.min.js",
"bxSlider": "https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.5/jquery.bxslider.min.js",
"angular": "https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.2/angular.min.js",
"ngAnimate": "https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.2/angular-animate.min.js"
}
const loadedLibs = {}
let counter = 0
const loadAsync = function(lib) {
var http = new XMLHttpRequest()
http.open("GET", libs[lib], true)
http.onload = () => {
loadedLibs[lib] = http.responseText
if (++counter == Object.keys(libs).length) startScripts()
}
http.send()
}
const startScripts = function() {
for (var lib in libs) eval(loadedLibs[lib])
console.log("allLoaded")
}
for (var lib in libs) loadAsync(lib)
简而言之，它以异步方式加载所有脚本，然后执行它们。
Github repo ：https://github.com/mudroljub/js-async-loader
答案 16 :(得分：0)
好吧，x.parentNode返回HEAD元素，因此您将在head标记之前插入脚本。也许这就是问题。
请尝试x.parentNode.appendChild()。
答案 17 :(得分：0)
你考虑过使用Fetch Injection吗？我推出了一个名为fetch-inject的开源库来处理这些案例。这是使用lib的加载器的样子：
fetcInject([
'js/jquery-1.6.2.min.js',
'js/marquee.js',
'css/marquee.css',
'css/custom-theme/jquery-ui-1.8.16.custom.css',
'css/main.css'
]).then(() => {
'js/jquery-ui-1.8.16.custom.min.js',
'js/farinspace/jquery.imgpreload.min.js'
})
对于向后兼容性，可以使用功能检测和回退到XHR注入或脚本DOM元素，或者使用document.write将标记内联到页面中。
答案 18 :(得分：0)
如果有人想在React中使用ES6功能，
import {uniqueId} from 'lodash' // optional
/**
* @param {String} file The path of the file you want to load.
* @param {Function} callback (optional) The function to call when the script loads.
* @param {String} id (optional) The unique id of the file you want to load.
*/
export const loadAsyncScript = (file, callback, id) => {
const d = document
if (!id) { id = uniqueId('async_script') } // optional
if (!d.getElementById(id)) {
const tag = 'script'
let newScript = d.createElement(tag)
let firstScript = d.getElementsByTagName(tag)[0]
newScript.id = id
newScript.async = true
newScript.src = file
if (callback) {
// IE support
newScript.onreadystatechange = () => {
if (newScript.readyState === 'loaded' || newScript.readyState === 'complete') {
newScript.onreadystatechange = null
callback(file)
}
}
// Other (non-IE) browsers support
newScript.onload = () => {
callback(file)
}
}
firstScript.parentNode.insertBefore(newScript, firstScript)
} else {
console.error(`The script with id ${id} is already loaded`)
}
}
答案 19 :(得分：-3)
我建议先考虑缩小文件，看看是否能给你足够大的速度提升。如果您的主机速度很慢，可以尝试将该静态内容放在CDN上。