异步加载脚本
我正在使用JQuery的几个插件、自定义小部件和其他一些库。因此，我有几个.js和.css文件。我需要为我的网站创建一个加载器，因为它需要一些时间来加载。如果我可以在导入所有内容之前显示加载器，那就太好了：
...
....
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函数。不过，由于某些原因，页面被冻结了……
回答 20
Stack Overflow用户
发布于 2011-10-11 06:00:13
异步加载的几个解决方案：
//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内容的加载。它还避免了必须异步加载每个所需脚本的问题。
如果您有一个特别花哨的交互，但并不总是需要使用某种较大的脚本，那么在需要之前避免加载该特定脚本(惰性加载)可能会很有用。
对于任何可以使用现代功能的人，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);...and它将优雅地处理CDN中断。
Stack Overflow用户
发布于 2013-08-24 05:16:12
HTML5的新“async”属性应该可以做到这一点。如果你关心IE，大多数浏览器也支持‘'defer’。
异步- HTML
defer - HTML
在分析新的adsense广告单元代码时，我注意到了这个属性和搜索结果：http://davidwalsh.name/html5-async
Stack Overflow用户
发布于 2011-10-13 00:02:21
当所有脚本加载完成后，我将页面重定向到index2.html，其中index2.html使用相同的库。因为一旦页面重定向到index2.html，浏览器就有一个缓存，所以index2.html加载时间不到一秒，因为它拥有加载页面所需的一切。在我的index.html页面中，我还加载我计划使用的图像，以便浏览器将这些图像放在缓存中。所以我的index.html看起来是这样的：
Project Management
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');
})();
// once the page is loaded go to index2.html
window.onload = function () {
document.location = "index2.html";
}
Loading关于这一点的另一件好事是，我可以在页面中放置一个加载器，当页面加载完成后，加载器将消失，新页面将在几毫秒内运行。
https://stackoverflow.com/questions/7718935
复制相似问题