1

我正在加载两个 JS 文件，一个包含许多插件，包括 Jquery。'ready()' JQuery 函数在第二个文件中。

代码：

   function downloadJSAtOnload() {

       var element = document.createElement("script");
       element.src ='<%= deferJsAll %>';
       document.body.appendChild(element);

      // second JS file load with isReady goes here
   }

   // Check for browser support of event handling capability
   if (window.addEventListener)
       window.addEventListener("load", downloadJSAtOnload, false);
   else if (window.attachEvent)
       window.attachEvent("onload", downloadJSAtOnload);
   else window.onload = downloadJSAtOnload;

您可以看到我何时还加载了第二个文件（请参阅代码中的注释）。

问题是我无法控制执行顺序，即便如此，'ready()' 在加载 JQuery 之前运行，我得到一个错误。是否可以选择使用延迟加载并确保首先加载 Jquery 文件，然后执行第二个文件（具有 ready() 函数的那个​​）？

我正在使用“<%= deferJsAll %>”，因为我正在决定从 CDN、gzip 或纯文本 JS 文件提供哪个文件。

进展：我想把：

var elementApp = document.createElement("script");
elementApp.src = 'js/app.js';
document.body.appendChild(elementApp);

在第一个文档的末尾。所以当第一个文档完成加载后，它会将第二个依赖的 JS 代码嵌入到文档的正文中。你认为这是个好主意吗？

4

2 回答 2

2

您可以使用 onload 和 onreadystatechange（对于 IE）来检测脚本何时完成加载。

function loadScript(callback){
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = '<%= deferJsAll %>';
  document.body.appendChild(script);

  // exit on jQuery load.
  script.onload = function(){ callback(); };
  script.onreadystatechange = function() {
    if (this.readyState == 'complete') callback();
  }
}


loadScript(function(){
  $.getScript('<% jquery-dependent.js %>', function(){
     // jquery-dependent.js is loaded
  }
});
于 2012-07-05T01:34:09.103 回答
1

这是我需要等到页面上的某个 var 存在时使用的解决方案。它需要一个名称（例如jQuery，具有任意深度的名称空间twttr.widgets）和其他不言自明的属性。当我需要等到 Facebook 和 Twitter 小部件加载时，可以在http://www.vitalmtb.com/上进行生产。

// Wait till JS object is loaded. It can be a chanined variable name.
window.whenAvailable = function (name, callback, interval, max_wait) {
    interval || (interval = 50); // ms
    max_wait || (max_wait = 5000); // ms
    var timer,
        findVarByName = function(name) {
        var index = 0,
            parts = name.split('.'),
            result = window;

        index = 0;
        try {
            while (typeof result !== "undefined" && result !== null && index < parts.length) {
                result = result[parts[index++]];
            }
        }
        catch (e) {}
        if (index < parts.length || (typeof result == 'undefined' && result === undefined)) return false;
        else return true;
    };

    timer = window.setTimeout(function() {
        if (findVarByName(name)) {
            return callback();
        } else {
            window.setTimeout(arguments.callee, interval);
        }
    }, interval);

    window.setTimeout(function() {
        clearTimeout(timer);
    }, max_wait);
}

采用：

whenAvailable('FB', $j.spotlights.a.show_social_buttons);
whenAvailable('twttr.widgets', $j.spotlights.b.show_social_buttons);
于 2012-07-05T01:40:20.787 回答