Question

我有以下代码。它减慢了我的网站速度 - 我知道因为当我评论它时它会减少大约2秒的加载时间。我怎么能告诉jquery（我正在使用jquery）只要有时间就加载它？没有急于......任何时候都可以，只要它不影响网站负载：

<div id="indexButtonFacebookDIV" class="indexFooterButtonsDIV">
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=192869610731913";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>    
  <div class="fb-like" data-href="<?php echo "$index->facebook\n";?>" data-send="false" data-layout="button_count" data-width="450" data-show-faces="false" data-font="verdana"></div>
</div>

<div id="indexButtonGooglePlusDIV" class="indexFooterButtonsDIV">
  <div class="g-plusone" data-size="tall" data-annotation="none"></div>
  <script type="text/javascript">
    (function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();
  </script>
</div>

<div id="indexButtonTwitterDIV" class="indexFooterButtonsDIV">
  <a href="https://twitter.com/share" class="twitter-share-button" data-url="<?php echo "$index->twitter\n";?>" data-dnt="true">Tweet</a>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
</div>

我尝试使用head.js脚本，但我无法让它异步加载...

三江源

Answer 1

我会使用您显示的所有来源制作单独的social.js脚本。浏览这个源代码，你看到为js元素创建的所有内容都使它像google +一样异步（这不应该影响任何按钮行为）。

然后在正文末尾插入脚本标记

<script src="social.js" type="text/javascript" async="async"></script>

哦，顺便说一下，将源码的html部分保留在原来的位置，只需将脚本拔出......

所以，social.js看起来像这样：

(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;

    js.async = true;

    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=192869610731913";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));

(function() {
      var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/plusone.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    })();

!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;  js.async = true; js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

运行JQuery异步 - 不中断站点负载

1 个答案: