猿问

异步加载脚本

异步加载脚本

我正在使用来自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文件异步加载的页面)上，我不关心获取错误。我只会显示一个加载程序并在完成后重定向页面.

这个主意是个好选择吗？还是应该继续尝试实现异步方法？


牛魔王的故事
浏览 563回答 3
3回答

扬帆大鱼

当完成加载的所有脚本都重定向到index2.html，其中index2.html使用相同的库时，我异步加载脚本(html 5具有此特性)。因为一旦页面重定向到index2.html，浏览器就会有一个缓存，所以index2.html加载不到一秒钟，因为它拥有加载页面所需的全部内容。在index.html页面中，我还加载了我计划使用的图像，以便浏览器将这些图像放在缓存中。所以我的index.html看起来是：<!DOCTYPE&nbsp;html><html><head> &nbsp;&nbsp;&nbsp;&nbsp;<meta&nbsp;http-equiv="Content-Type"&nbsp;content="text/html;&nbsp;charset=iso-8859-1"&nbsp;/> &nbsp;&nbsp;&nbsp;&nbsp;<title>Project&nbsp;Management</title> &nbsp;&nbsp;&nbsp;&nbsp;<!--&nbsp;the&nbsp;purpose&nbsp;of&nbsp;this&nbsp;page&nbsp;is&nbsp;to&nbsp;load&nbsp;all&nbsp;the&nbsp;scripts&nbsp;on&nbsp;the&nbsp;browsers&nbsp;cache&nbsp;so&nbsp;that&nbsp;pages&nbsp;can&nbsp;load&nbsp;fast&nbsp;from&nbsp;now&nbsp;on&nbsp;--> &nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;stylesheet(url)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;s&nbsp;=&nbsp;document.createElement('link'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.type&nbsp;=&nbsp;'text/css'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.async&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.src&nbsp;=&nbsp;url; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;x&nbsp;=&nbsp;document.getElementsByTagName('head')[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x.appendChild(s); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;function&nbsp;script(url)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;s&nbsp;=&nbsp;document.createElement('script'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.type&nbsp;=&nbsp;'text/javascript'; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.async&nbsp;=&nbsp;true; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;s.src&nbsp;=&nbsp;url; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var&nbsp;x&nbsp;=&nbsp;document.getElementsByTagName('head')[0]; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;x.appendChild(s); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//load&nbsp;scritps&nbsp;to&nbsp;the&nbsp;catche&nbsp;of&nbsp;browser &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(function&nbsp;()&nbsp;{&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stylesheet('css/custom-theme/jquery-ui-1.8.16.custom.css'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stylesheet('css/main.css'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stylesheet('css/marquee.css'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;stylesheet('css/mainTable.css'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script('js/jquery-ui-1.8.16.custom.min.js'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script('js/jquery-1.6.2.min.js'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script('js/myFunctions.js'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script('js/farinspace/jquery.imgpreload.min.js'); &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;script('js/marquee.js');&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})(); &nbsp;&nbsp;&nbsp;&nbsp;</script> &nbsp;&nbsp;&nbsp;&nbsp;<script&nbsp;type="text/javascript"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;//&nbsp;once&nbsp;the&nbsp;page&nbsp;is&nbsp;loaded&nbsp;go&nbsp;to&nbsp;index2.html &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;window.onload&nbsp;=&nbsp;function&nbsp;()&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document.location&nbsp;=&nbsp;"index2.html"; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;</script></head><body><div&nbsp;id="cover"&nbsp;style="position:fixed;&nbsp;left:0px;&nbsp;top:0px;&nbsp;width:100%;&nbsp;height:100%;&nbsp;background-color:Black; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;z-index:100;">Loading</div><img&nbsp;src="images/home/background.png"&nbsp;/><img&nbsp;src="images/home/3.png"/><img&nbsp;src="images/home/6.jpg"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="images/home/4.png"/><img&nbsp;src="images/home/5.png"/><img&nbsp;src="images/home/8.jpg"/><img&nbsp;src="images/home/9.jpg"/> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img&nbsp;src="images/logo.png"/><img&nbsp;src="images/logo.png"/><img&nbsp;src="images/theme/contentBorder.png"/></body></html>另一个好的方面是，我可以在页面中放置一个加载器，当页面完成后，加载器就会消失，在毫秒内，新页面将运行。
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

JavaScript
Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
Html5
我要回答