在加载js之前等待jquery异步加载答案

【问题标题】：Waiting for jquery to load asynchronously before loading js在加载js之前等待jquery异步加载
【发布时间】：2015-07-02 07:58:31
【问题描述】：

我正在使用以下内容在我的网站上加载广告

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
        var adWidth = $(document).width();
        google_ad_client = "ca-pub-6777348526535979";
        if ( adWidth >= 768 ) {
          google_ad_slot    = "3870513647";
          google_ad_width   = 728;
          google_ad_height  = 90;
        } else {
          google_ad_slot    = "1127560842";
          google_ad_width   = 320;
          google_ad_height  = 50;
        }
    </script>
    <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

它工作正常，但我认为我可以进一步优化广告投放。我想异步加载 jquery，因此下面的脚本必须等待 jquery 被加载。

<script type="text/javascript">
            var adWidth = $(document).width();
            google_ad_client = "ca-pub-6777348526535979";
            if ( adWidth >= 768 ) {
              google_ad_slot    = "3870513647";
              google_ad_width   = 728;
              google_ad_height  = 90;
            } else {
              google_ad_slot    = "1127560842";
              google_ad_width   = 320;
              google_ad_height  = 50;
            }
        </script>
        <script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>

我怎样才能做到这一点？

【问题讨论】：

标签： javascript jquery asynchronous

【解决方案1】：

你可以这样做：

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">    
    var google_ad_slot;
    var google_ad_width;
    var google_ad_height;
    var google_ad_client;

    $(document).ready(function() 
    {
        var adWidth = $(document).width();
        google_ad_client = "ca-pub-6777348526535979";
        if ( adWidth >= 768 ) {
           google_ad_slot    = "3870513647";
           google_ad_width   = 728;
           google_ad_height  = 90;
        } else {
           google_ad_slot    = "1127560842";
           google_ad_width   = 320;
           google_ad_height  = 50;
        }
        $("head").append('<script type="text/javascript" src="//pagead2.googlesyndication.com/pagead/show_ads.js"></script>');
    });
</script>

在 DOM 准备好并加载脚本（包括 jQuery）后，jQuery 将调用此 $(document).ready() 函数，您的值将被初始化，Google Ad 脚本将添加到文档的 head 部分。

所有现代浏览器在将脚本添加到 DOM 后都能正确加载和运行脚本。

变量应该是全局变量，以便 Google 脚本可以使用它们。您也可以尝试将$(document).ready 更改为$(window).load，如果它不能完全确定它已加载。

【讨论】：

如果 jquery.min.js 的脚本标签中有async 会起作用
@user2650277 好像不会 :( 在async scripts 的情况下，$(document).ready() 在 DOM 准备好后触发。异步脚本仍然无法加载。
有什么方法可以让我异步加载所有脚本，这样就不会影响加载时间
@user2650277 您可以使用$.append 函数或$.getScript 在$(document).ready() 上手动添加所有脚本。但是，正如我认为的那样，这是一种不好的做法。最好的方法是同步加载 jQuery 并异步加载所有其他脚本。我确信它不会影响加载 - jquery.min.js 是一个非常轻量级的库；此外，它是静态的，并且被浏览器正确缓存。 jQuery 2.1.4 正在下载 14 毫秒。
我认为您的代码有问题。广告无法加载，我看到的是'); });

【解决方案2】：

我认为您正在寻找的是AMD. AMD（异步模块定义）是一种允许 Javascript 模块显式声明其依赖关系并异步加载的规范。

可能最著名的 AMD 实现是 RequireJS.

require(['jquery'], function($){
    var adWidth = $(document).width();
    // And the rest of your code
});

但请注意，jQuery 不能很好地支持 AMD，因此您必须跳过一些障碍。 RequireJS 网站上有instructions 处理jQuery。

【讨论】：