等待，直到頁面準備好加載所有的社會媒體按鈕

Question

目前，我有這個「部件」來提供所有這些社交媒體按鈕分享網頁，

這是代碼：

<div class="social_media social_media_button"> 
      <div class="smCnt fbCnt"> 
              <div class="fb-like" data-href="http://funcook.com/" data-send="true" data-layout="button_count" data-width="200" data-show-faces="false" data-font="verdana"></div> 
      </div> 
      <div class="smCnt gpCnt"> 
              <g:plusone size="medium"></g:plusone> 
      </div> 
      <div class="smCnt ptCnt"> 
              <a href="http://pinterest.com/pin/create/button/?url=http://funcook.com/'" class="pin-it-button" count-layout="horizontal"><img border="0" src="//assets.pinterest.com/images/PinExt.png" title="Pin It" /></a> 
      </div> 
      <div class="smCnt twCnt"> 
              <a href="https://twitter.com/share" class="twitter-share-button" data-lang="es" >Twittear</a> 
      </div> 
      <div class="smCnt tmCnt"> 
              <a href="http://www.tumblr.com/share" title="Share on Tumblr" style="display:inline-block; text-indent:-9999px; overflow:hidden; width:81px; height:20px; background:url('http://platform.tumblr.com/v1/share_1.png') top left no-repeat transparent;">Share on Tumblr</a> 
      </div> 

</div> 
    <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> 
    <script type="text/javascript" src="http://assets.pinterest.com/js/pinit.js"></script> 
    <script type="text/javascript"> 
            window.___gcfg = {lang: 'es'}; 
            (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> 
    <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/es_LA/all.js#xfbml=1&appId=121495767915738"; 
     fjs.parentNode.insertBefore(js, fjs); 
    }(document, 'script', 'facebook-jssdk'));</script> 

至極按預期工作，但很少的資源頁面加載過程中加載的，所以我嘗試：

<script> 
    /* just include them in a $document.ready */ 
           $(document).ready(function(){ 
             !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"); 
             window.___gcfg = {lang: 'es'}; 
             (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)) return; 
              js = d.createElement(s); js.id = id; 
              js.src = "//connect.facebook.net/es_LA/all.js#xfbml=1&appId=121495767915738"; 
              fjs.parentNode.insertBefore(js, fjs); 
             }(document, 'script', 'facebook-jssdk')); 
             (function() { 
              var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
              po.src = 'http://assets.pinterest.com/js/pinit.js'; 
              var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
             })(); 
             $('.social_media').slideDown(); 
           }) 

          </script> 

至極也似乎工作，但仍然看到在頁面加載報告此項目：

http://tools.pingdom.com/fpt/#!/wZNCkPIsf/http://funcook.com/

我如何確保這個按鈕不會影響（初始）加載時間？

Answer 1

您可以將所有社交媒體按鈕加載到一個單一的功能，然後通過setTimeout執行。

setTimeout("loadSocialMediaButtons", 100); 

這將允許頁面首先加載其所有內容，然後加載社交媒體按鈕。

Answer 2

我想你需要包裝內

$(window).on('load', function(){ 
    !function(d,s,id){var js,... 
}); 

，而不是使用document.ready所有的代碼，否則加載時間將考慮還代碼（以及所有你加載內資產）

作爲一個旁註，你定義三次幾乎相同的功能：我建議使用，而不是一個單一的函數，加載和追加一個JavaScript文件，你可以通過作爲參數