Question

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

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

我怎样才能做到这一点？

Answer 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广告脚本将被添加到head部分一份文件。

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

变量应该是全局的，以便让Google脚本与它们协同工作。您也可以尝试将$(document).ready更改为$(window).load，如果无法确保已加载{{1}}。

Answer 2

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

可能最着名的AMD实现是RequireJS.基本上，您从<script>标记移动代码并将其更改如下：

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

请注意，jQuery并不能很好地支持AMD，所以你必须跳过一些箍。 RequireJS网站上有instructions来处理jQuery。

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

2 个答案: