我正在使用JQuery中的几个插件、自定义小部件和一些其他库。因此，我有几个.js和.css文件。我需要为我的网站创建一个加载程序，因为加载需要一些时间。如果我能在导入所有以下内容之前显示加载程序，那就太好了：
<；script type=“text/javascript”src=”https://stackoverflow.com/questions/7718935/js/jquery-1.6.2.min.js“></脚本>；
<；script type=“text/javascript”src=”https://stackoverflow.com/questions/7718935/js/myFunctions.js“></脚本>；
<；link type=“text/css”href=”https://stackoverflow.com/questions/7718935/css/main.css“rel=”样式表“/>；
...
....
等
我发现了一些教程，使我能够异步导入JavaScript库。例如，我可以做如下事情：
（函数（）{
var s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 异步=真；
s、 src='https://stackoverflow.com/questions/7718935/1〕https://stackoverflow.com/questions/7718935/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（）；
函数importScripts（）
{
//导入：jquery-ui-1.8.16.custom.min.js
getContent（“js/jquery-1.6.2.min.js”，函数（代码）{
var s=document.createElement（'script'）；
s、 类型='text/javascript'；
//s、 异步=真；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
setTimeout（insertNext1,1）；
});
//导入：jquery-ui-1.8.16.custom.min.js
函数insertNext1（）
{
getContent（“js/jquery-ui-1.8.16.custom.min.js”），函数（代码）{
var s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
setTimeout（insertNext2,1）；
});
}
//导入：jquery-ui-1.8.16.custom.css
函数insertNext2（）
{
getContent（“css/自定义主题/jquery-ui-1.8.16.custom.css”，函数（代码）{
var s=document.createElement（'link'）；
s、 类型='text/css'；
s、 rel=“样式表”；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
setTimeout（insertNext3,1）；
});
}
//导入：main.css
函数insertNext3（）
{
getContent（“css/main.css”，函数（代码）{
var s=document.createElement（'link'）；
s、 类型='text/css'；
s、 rel=“样式表”；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
setTimeout（insertNext4,1）；
});
}
//导入：jquery.imgpreload.min.js
函数insertNext4（）
{
getContent（“js/farinspace/jquery.imgpreload.min.js”，函数（代码）{
var s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
设置超时（插入NEXT5,1）；
});
}
//导入：marquee.js
函数insertNext5（）
{
getContent（“js/marquee.js”，函数（代码）{
var s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
设置超时（插入NEXT6,1）；
});
}
//导入：marquee.css
函数insertNext6（）
{
getContent（“css/marquee.css”，函数（代码）{
var s=document.createElement（'link'）；
s、 类型='text/css'；
s、 rel=“样式表”；
s、 innerHTML=代码；
var x=document.getElementsByTagName（'script'）[0]；
x、 parentNode.insertBefore（s，x）；
setTimeout（insertNext，1）；
});
}
函数insertNext（）
{
设置超时（pageReadyMan，10）；
}
}
//获取url的内容并将该内容传递给指定函数
函数getContent（url、callBackFunction）
{
//尝试创建XMLHttpRequest并发出请求
尝试
{
var asyncRequest；//用于保存XMLHttpRequest对象的变量
asyncRequest=new XMLHttpRequest（）；//创建请求对象
//寄存器事件处理程序
asyncRequest.onreadystatechange=函数（）{
状态更改（异步请求、调用函数）；
}
asyncRequest.open（'GET'，url，true）；//准备请求
asyncRequest.send（null）；//发送请求
}//结束尝试
捕获（例外）
{
警报（'请求失败'）；
}//端盖
}//结束函数getContent
//准备就绪时调用包含内容的函数
函数状态更改（asyncRequest、callBackFunction）
{
if（asyncRequest.readyState==4&；asyncRequest.status==200）
{
callBackFunction（asyncRequest.responseText）；
}//如果结束，则结束
}//结束函数状态更改
奇怪的是，所有样式的工作加上所有javascript函数。由于某种原因，页面被冻结
异步加载的两种解决方案：
//此函数将跨浏览器异步加载脚本
函数装入脚本（src，回调）
{
var s，
R
T
r=假；
s=document.createElement（'script'）；
s、 类型='text/javascript'；
s、 src=src；
s、 onload=s.onreadystatechange=function（）{
//console.log（this.readyState）；//取消对此行的注释以查看调用了哪些就绪状态。
如果（！r&；（！this.readyState | | this.readyState=='complete'））
{
r=真；
回调（）；
}
};
t=document.getElementsByTagName（'script'）[0]；
t、 parentNode.insertBefore（s，t）；
}
如果页面上已经有jQuery，只需使用：
$.getScript（url，successCallback）*
此外，您的脚本可能在文档加载完成之前加载/执行，这意味着您需要等待document.ready，然后才能将事件绑定到元素
在没有看到代码的情况下，无法具体说明您的问题是什么
最简单的解决方案是将所有脚本内联在页面底部，这样它们在执行时不会阻止HTML内容的加载。它还避免了必须异步加载每个所需脚本的问题
如果您有一个特别奇特的交互，但并不总是使用它，它需要某种更大的脚本，那么在需要之前避免加载该特定脚本（延迟加载）可能会很有用
*加载了$的脚本。getScript可能不会被缓存
对于任何可以使用现代功能（如Promise对象）的人来说，loadScript功能变得非常简单：
函数加载脚本（src）{
返回新承诺（功能（解决、拒绝）{
var s；
s=document.createElement（’script’）；
s、 src=src；
s、 onload=解析；
s、 onerror=拒绝；
文件。标题。附录子项；
});
}
请注意，此版本不再接受回调参数，因为返回的承诺将处理回调。以前是loadScript（src，callback）现在是loadScript（src）。然后是（callback）
这有额外的好处，能够检测和处理故障，例如，一个人可以调用
加载脚本（cdnSource）
.catch（loadScript.bind（null，localSource））
.然后（successCallback，failureCallback）；
…它将优雅地处理CDN中断