异步加载脚本我正在使用来自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文件异步加载的页面)上，我不关心获取错误。我只会显示一个加载程序并在完成后重定向页面.这个主意是个好选择吗？还是应该继续尝试实现异步方法？
3 回答
扬帆大鱼
TA贡献1799条经验 获得超9个赞
<!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>添加回答
举报
0/150
提交
取消