Question

我正在加载两个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（）函数的文件）？

我正在使用“＆lt;％= deferJsAll％＆gt;”因为我决定从CDN，gzip或纯文本JS文件中提供哪个文件。

进展：我考虑过只放：

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

在第一份文件的末尾。因此，当第一个文档完成加载时，它会将第二个相关的JS代码嵌入到文档的主体中。你认为这是个好主意吗？

Answer 1

你可以使用onload＆amp; 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
  }
});

Answer 2

这是我在需要等到页面上的某些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);

延迟加载JavaScript，Jquery'ready（）'在加载JQuery之前运行

2 个答案: