问题 Javascript包含以后不在页面中加载

你的问题的基础可能在于你的假设：

一切都应该同步加载

一切都是最明确的 不 同步加载。 HTTP 1.1协议支持 piplining 由于 分块传输编码，您的引用对象可能会或可能不会在主网页加载完成之前完成加载。

所有这一切都发生了 异步 而且您不能保证它们的加载顺序。这就是为什么 浏览器与您的Web服务器建立多个并行连接 加载单个网页时。因为javascript和jQuery是事件驱动的，所以它们本质上是异步的 如果你不太了解这种行为，这可能会让人感到困惑。

复杂你的问题是文件onload JavaScript事件（记住，jQuery只是扩展JavaScript） “当DOM准备好时，可以在图像和其他外部内容加载之前调用”。 是的，这个外部内容可以包含您到jquery.js脚本的链接。如果在DOM之后加载，那么您将看到错误“$ is not defined”。由于链接脚本尚未加载，因此未定义jquery选择器。同样，与您的其他链接库。

尝试使用 $（窗口）.load（） 代替。这应该适用于所有引用的对象 和 DOM已加载。

此代码将加载放入的每个脚本URL libs 按照确切的顺序，在添加下一个之前等待一个完全加载。 它不像让浏览器那样优化，但它允许您监视错误并强制加载顺序。

(function(){
    var libs = [
        "http://example.com/jquery.js",
        "http://example.com/tracker.js",
        "http://example.com/myscript.js"
    ];
    var handle_error = function() {
        console.log("unable to load:", this.src);
    };
    var load_next_lib = function() {
        if(libs.length) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = libs.shift();
            script.addEventListener("load", load_next_lib);
            script.addEventListener("error", handle_error);
            document.body.appendChild(script);
        }
    };
    load_next_lib();
})();

但我会建议你检查每一个 <script> 您网站的标记，看看他们是否有 defer="" 要么 async="" 属性。 大多数问题都来自这些，因为它们告诉浏览器稍后执行脚本。 它们也可能只是错误的顺序。

由于脚本倾向于以随机顺序加载，因此您可以强制分析脚本在一切准备就绪后加载。

这项任务有各种方法。

HTML5摇滚给了一个相当不错的 片段 对于这种东西。 此外，根据您的需要，您可以使用模块加载器 require.js。使用加载promises和Require.js是 太可爱了。通常，您使用大量的JavaScript，模块加载器将帮助您解决这个问题。

我保持最丑陋，效率最低，最终仍然是坚实的方法。 等待外部库加载可能会产生巨大的瓶颈，应该考虑并且也要非常小心地处理。分析抓取脚本是 async 而且真的很难处理。在这些情况下，我更喜欢

加载外部延迟脚本在某种程度上很简单：

function loadExtScript(src, test, callback) {
  var s = document.createElement('script');
  s.src = src;
  document.body.appendChild(s);

  var callbackTimer = setInterval(function() {
    var call = false;
    try {
      call = test.call();
    } catch (e) {}

    if (call) {
      clearInterval(callbackTimer);
      callback.call();
    }
  }, 100);
}

看看这个示例，我在加载脚本时使用promise函数动态加载jQuery： http://jsfiddle.net/4mtyu/487/

这是一个按顺序加载Angular和jQuery的链接演示：http://jsfiddle.net/4mtyu/488/ 

考虑上面的示例，您可以将分析加载为：

loadExtScript('https://code.jquery.com/jquery-2.1.4.js', function () {
    return (typeof jQuery == 'function');
}, jQueryLoaded);

function jQueryLoaded() {
    loadExtScript('https://analytics-lib.com/script.js', function () {
        return (typeof jQuery == 'function');
    }, analyticsLoadedToo);
}

function analyticsLoadedToo() {
    //cool we are up and running
    console.log("ready");
}

正如其他人所描述的那样，您正在加载脚本，然后在脚本加载完成之前尝试执行代码。因为这是一个 偶尔间歇性的 围绕位于HTML中的相对少量代码的错误，您可以通过一些简单的轮询来修复它：

(function runAnalytics () {
  if (typeof analytics === 'undefined') {
    return setTimeout(runAnalytics, 100);
  }
  analytics.track('on that awesome page');
}());

...同样可以用于其他库，希望你看到模式：

(function runJQuery () {
  if (typeof $ === 'undefined') {
    return setTimeout(runJQuery, 100);
  }
  $(document).ready(...);
}());

编辑： 正如评论中指出的那样 load 事件会更适合这个。问题是这些事件可能在脚本执行时已经触发，您必须为这些场景编写回退代码。我不赞成不写10行代码来执行1行，我建议一个简单，非侵入性，快速和脏，确保在每个浏览器轮询解决方案上工作。但是为了不再获得任何投票，这里是一个 更合适 繁琐而复杂的解决方案，以防你有一些牛肉轮询：

<script>
// you can reuse this function
function waitForScript (src, callback) {
  var scripts = document.getElementsByTagName('script');
  for(var i = 0, l = scripts.length; i < l; i++) {
    if (scripts[i].src.indexOf(src) > -1) {
      break;
    }
  }
  if (i < l) {
    scripts[i].onload = callback;
  }
}

function runAnalytics () {
  analytics.track('on that awesome page');
}

if (typeof analytics === 'undefined') {
  waitForScript('analytics.js', runAnalytics);
} else {
  runAnalytics();
}

function runJQuery () {
  $(document).ready(...);
}

if (typeof $ === 'undefined') {
  waitForScript('jquery.min.js', runJQuery);
} else {
  runJQuery();
}
</script>

我们仍然每天都会看到这个错误几次，并且没有得到任何结论性的答案。我最好的猜测是，早期的脚本超时下载，或者用户在链接之间快速导航，阻止页面完全加载。他们也可能只是使用后退按钮导致页面上的脚本出现奇怪的行为。

它有一个很酷的解决方案。为您的应用程序正确加载js。在这里，我首先加载jQuery然后加载analytics.js。我希望这将解决您支持html5的浏览器的问题。 码：

    var fileList =[
                    'your_file_path/jQuery.js',
                    'your_file_path/analytics.js'
                  ];

    fileList.forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
 });

此代码段将首先加载jQuery，然后加载analytics.js文件。 希望这将解决您的问题。