Ton*_*Nam 119 html javascript ajax html5 asynchronous
我正在使用几个插件,自定义小部件和一些来自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函数.由于某种原因,页面被冻结了......
zzz*_*Bov 163
一对异步加载的解决方案:
//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);
......它会优雅地处理CDN中断.
Don*_*ter 30
HTML5的新"异步"属性应该可以解决问题.如果你关心IE,大多数浏览器也支持'defer'.
async - HTML
<script async src="siteScript.js" onload="myInit()"></script>
推迟 - HTML
<script defer src="siteScript.js" onload="myInit()"></script>
在分析新的adsense广告单元代码时,我注意到该属性和搜索引导我:http://davidwalsh.name/html5-async
当所有完成加载的脚本我将页面重定向到index2.html,其中index2.html使用相同的库时,我异步加载脚本(html 5具有该功能).由于浏览器在页面重定向到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>
关于这一点的另一个好处是我可以在页面中放置一个加载器,当页面完成加载时,加载器将消失并且在几毫秒的时间内将运行新页面.
几点说明:
s.async = true对于HTML5 doctype不是很正确,正确的是s.async = 'async'(实际使用true 是正确的,感谢amn在下面的评论中指出了它)由于最近有一个异步加载文件的原因,但是为了顺序,我建议在你的例子中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);
})();
谷歌的例子
<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>
| 归档时间： |
|
| 查看次数： |
201983 次 |
| 最近记录： |