问题是：异步加载js文件，然后在执行加载文件的回调之前检查是否加载了dom。 异步加载js文件，然后在执行加载文件的回调之前检查dom是否加载完毕。
编辑：我们没有使用jQuery，我们使用的是Prototype。 我们不使用jQuery，我们使用Prototype。编辑：我们没有使用jQuery；我们使用Prototype。 为代码示例添加了更多注释。
我试图异步加载所有的js文件，以防止它们阻塞页面的其他部分。但是当脚本加载和回调被调用时，我需要知道DOM是否已经被加载，所以我知道如何构建回调。请看下面的内容。
//load asynchronously
(function(){
var e = document.createElement('script');
e.type = "text/javascript";
e.async = true;
e.src = srcstr;
// a little magic to make the callback happen
if(navigator.userAgent.indexOf("Opera")){
e.text = "initPage();";
}else if(navigator.userAgent.indexOf("MSIE")){
e.onreadystatechange = initPage;
}else{
e.innerHTML = "initPage();";
}
// attach the file to the document
document.getElementsByTagName('head')[0].appendChild(e);
})();
initPageHelper = function(){
//requires DOM be loaded
}
initPage = function(){
if(domLoaded){ // if dom is already loaded, just call the function
initPageHelper();
}else{ //if dom is not loaded, attach the function to be run when it does load
document.observe("dom:loaded", initPageHelper);
}
}
回调被正确调用是由于一些幕后的魔法 你可以从Google的这个演讲中了解到。http:/www.youtube.comwatch?v=52gL93S3usU&feature=related
有什么最简单的、跨浏览器的方法来询问DOM是否已经加载？
EDIT 这是我采用的完整解决方案。我包含了prototype和使用普通方法的异步脚本加载器。有了prototype，生活就方便多了，所以我愿意为这个脚本屏蔽。
<script type="text/javascript" src="prototype/prototype.js"></script>
<script type="text/javascript" src="asyncLoader.js"></script>
而实际上，在我的代码中，我把上面的两个文件进行了最小化，并把它们放在一起，以尽量减少传输时间和http请求。
然后我定义了DOM加载时要运行的内容，然后调用函数来加载其他脚本。
<script type="text/javascript">
initPage = function(){
...
}
</script>
<script type="text/javascript">
loadScriptAsync("scriptaculous/scriptaculous.js", initPage);
loadScriptAsync("scriptaculous/effects.js", initPage);
loadScriptAsync("scriptaculous/controls.js", initPage);
...
loadScriptAsync("mypage.js", initPage);
</script>
同样，上面的请求实际上是用minifier压缩成一个httpRequest。为了便于阅读，这里将它们分开。在这篇文章的底部有一段代码，展示了使用minifier后的代码。
asyncLoader.js的代码如下。
/**
* Allows you to load js files asynchronously, with a callback that can be
* called immediately after the script loads, OR after the script loads and
* after the DOM is loaded.
*
* Prototype.js must be loaded first.
*
* For best results, create a regular script tag that calls a minified, combined
* file that contains Prototype.js, and this file. Then all subsequent scripts
* should be loaded using this function.
*
*/
var onload_queue = [];
var dom_loaded = false;
function loadScriptAsync(src, callback, run_immediately) {
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src = src;
if("undefined" != typeof callback){
script.onload = function() {
if (dom_loaded || run_immediately)
callback();
else
onload_queue.push(callback);
// clean up for IE and Opera
script.onload = null;
script.onreadystatechange = null;
};
script.onreadystatechange = function() {
if (script.readyState == 'complete'){
if (dom_loaded || run_immediately)
callback();
else
onload_queue.push(callback);
// clean up for IE and Opera
script.onload = null;
script.onreadystatechange = null;
}else if(script.readyState == 'loaded'){
eval(script);
if (dom_loaded || run_immediately)
callback();
else
onload_queue.push(callback);
// clean up for IE and Opera
script.onload = null;
script.onreadystatechange = null;
}
};
}
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
document.observe("dom:loaded", function(){
dom_loaded = true;
var len = onload_queue.length;
for (var i = 0; i < len; i++) {
onload_queue[i]();
}
onload_queue = null;
});
我添加了立即运行脚本的选项 如果你有不依赖页面DOM被完全加载的脚本的话。
其实迷你化的请求是这样的。
<script type="text/javascript" src="/min/?b=javascript/lib&f=prototype/prototype.js,asyncLoader.js"></script>
<script type="text/javascript"> initPage = function(e){...}</script>
<script type="text/javascript">
srcstr = "/min/?f=<?=implode(',', $js_files)?>";
loadScriptAsync(srcstr, initPage);
</script>
他们使用的插件来自：[]http:/code.google.comminify][1] 。
你需要的是一个简单的 队列 的 onload 功能。还请 避嫌 因为它是不稳定的，而且不能证明未来。完整的源代码见 [演示]
var onload_queue = [];
var dom_loaded = false;
function loadScriptAsync(src, callback) {
var script = document.createElement('script');
script.type = "text/javascript";
script.async = true;
script.src = src;
script.onload = script.onreadystatechange = function() {
if (dom_loaded)
callback();
else
onload_queue.push(callback);
// clean up for IE and Opera
script.onload = null;
script.onreadystatechange = null;
};
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);
}
function domLoaded() {
dom_loaded = true;
var len = onload_queue.length;
for (var i = 0; i < len; i++) {
onload_queue[i]();
}
onload_queue = null;
};
// Dean's dom:loaded code goes here
// do stuff
domLoaded();
测试用途
loadScriptAsync(
"http://code.jquery.com/jquery-1.4.4.js",
function() {
alert("script has been loaded");
}
);
你可以把你的初始加载器脚本放在底部，就在最后的body标签之前。