问题:
异步加载 js 文件，然后在执行加载文件的回调之前检查是否加载了 dom。

编辑:我们不使用 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.com/watch?v=52gL93S3usU&feature=related

询问 DOM 是否已经加载的最简单的跨浏览器方法是什么？

编辑
这是我使用的完整解决方案。
我使用普通方法包含了原型(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>

同样，上面的请求实际上是使用压缩器压缩到一个 httpRequest 中的。为了便于阅读，它们在这里分开。这篇文章的底部有一个片段，显示了代码在缩小器中的样子。

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.com/p/minify/][1]

最佳答案

您需要的是一个包含onload 函数的简单队列。也请避免浏览器嗅探，因为它不稳定且不是面向 future 的。有关完整的源代码，请参阅 [ Demo ]

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");
   }
);

关于javascript - 异步加载 javascript，然后在执行回调之前检查加载的 DOM，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4249030/