Javascript 在加载js之前等待jquery异步加载

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

<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>

var adWidth=$（document.width（）；
google_ad_client=“ca-pub-6777348526535979”；
如果（adWidth>=768）{
google_ad_slot=“3870513647”；
谷歌广告宽度=728；
谷歌广告高度=90；
}否则{
google_ad_slot=“1127560842”；
谷歌广告宽度=320；
谷歌广告高度=50；
}

它工作得很好，但我认为我可以进一步优化广告交付

<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>

var adWidth=$（document.width（）；
google_ad_client=“ca-pub-6777348526535979”；
如果（adWidth>=768）{
google_ad_slot=“3870513647”；
谷歌广告宽度=728；
谷歌广告高度=90；
}否则{
google_ad_slot=“1127560842”；
谷歌广告宽度=320；
谷歌广告高度=50；
}

---

如何实现这一点？

我认为您需要的是AMD（异步模块定义）规范，它允许Javascript模块显式声明其依赖项并异步加载

AMD最著名的实现可能是，将代码从

标记中移出，并按如下方式进行更改：

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

---

不过要小心，jQuery对AMD的支持不是很好，所以您必须克服一些困难。在RequireJS网站上有许多用于处理jQuery的工具。

您可以这样做：

<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>

var谷歌广告槽；
变量google_ad_宽度；
变量google_ad_height；
var谷歌广告客户端；
$（文档）.ready（函数（）
{
var adWidth=$（document.width（）；
google_ad_client=“ca-pub-6777348526535979”；
如果（adWidth>=768）{
google_ad_slot=“3870513647”；
谷歌广告宽度=728；
谷歌广告高度=90；
}否则{
google_ad_slot=“1127560842”；
谷歌广告宽度=320；
谷歌广告高度=50；
}
$（“标题”）。附加（“”）；
});

DOM准备就绪并加载脚本（包括jQuery）后，jQuery将调用此

$（document）.ready（）

函数，您的值将被启动，Google Ad脚本将被添加到文档的

头部分

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

变量应该是全局的，以便让Google脚本使用它们。
您还可以尝试将
$（document）.ready
更改为
$（窗口）。如果无法加载，请加载
，以绝对确保已加载。
如果jquery.min的脚本标记中存在
async
，则可以。js@user2650277似乎不会：（在
异步脚本
s的情况下，
$（document）.ready（）
在DOM准备就绪后激发。异步脚本仍然可以不加载。有没有任何方法可以让我异步加载所有脚本，这样就不会影响加载time@user2650277您可以在
$（document）.ready（）上手动添加所有脚本
使用
$.append
函数或
$.getScript
。但是，正如我所想，这是一种不好的做法。最好是同步加载jQuery，异步加载所有其他脚本。我确信这不会影响加载-
jQuery.min.js
是一个非常轻量级的库；而且，它是静态的，并且是正确的RY由浏览器缓存。jQuery 2.1.4正在下载14毫秒。我认为您的代码有问题。Ad没有加载，我看到
）；}）取而代之