Задержка Загрузка социальной сети

Question

Я пытаюсь отложить загрузку следующего кода для социальных сетей: и все еще работаю.

<div id="social"> 
<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div> 
<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div> 
<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div> 
<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div> 
<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon 

</div> 
</div> 

Я хочу использовать JS или Jquery сделать это и планируют иметь $ (документ) .ready (функция() {}); для обеспечения загрузки документа до загрузки социальной сети.

Любая идея, что я могу использовать, и как я могу ее реализовать ... Я думаю, что я собираюсь оставить div #socail и иметь его document.write, но я не знаю, как я могу его отключить.

Все предложения присваиваются.

Answer 1

С помощью JavaScript вы можете использовать setTimeout для выполнения кода после задержки. Например:

setTimeout(function(){ 
    //use jQuery to generate that code block and append it to the document 
}, 10000); 

Это выполнит код внутри анонимной функции после 10 000 миллисекунд (10 секунд).

В качестве альтернативы, вы можете запустить код на странице как обычно, но скрыть его. После выбранной задержки выделите элементы социальных сетей. Это, вероятно, проще, так как вы можете предположить, что сценарии Facebook и Twitter будут запускать неизвестный код.

Answer 2

В подобном случае я реализовал небольшую функцию для загрузки скрипта, необходимого, чтобы сделать социальные кнопки правильной работой:

_MYNS.appendSocialWidget = function(id, url) { 
    var js, fjs = document.getElementsByTagName('script')[0]; 
    if (document.getElementById(id)) { return; } 
    js = document.createElement('script'); js.id = id; 
    js.charset = "utf-8"; 
    js.src = url; 
    fjs.parentNode.insertBefore(js, fjs); 
}; 

, а затем, когда document.ready происходит событие я загрузил все плагин мне нужно, как и

if ($('#social').length) { 

    /* Facebook send and like */ 
    $('<div id="fb-root" />').appendTo($('body')); 
    _MYNS.appendSocialWidget('facebook-jssdk', '//connect.facebook.net/it_IT/all.js#xfbml=1'); 

    /* twitter: tweet */   
    $('<a href="https://twitter.com/share" class="twitter-share-button">Tweet</a>').appendTo($('#social')); 
    _MYNS.appendSocialWidget('twitter-widget', '//platform.twitter.com/widgets.js'); 

    /* Google : +1 */ 
    $('<div class="g-plusone" data-size="medium" data-annotation="bubble" \ 
     data-expandTo="top"></div>').appendTo($('#social')); 
    _MYNS.appendSocialWidget('google-plusone', 'https://apis.google.com/js/plusone.js'); 

    ... 
}; 

Конечно, у меня были некоторые страницы без социальных кнопок, поэтому я проверяю перед существованием этого элемента. _MYNS - простое пространство имен, просто чтобы не загрязнять глобальную область.

Я не знаю, ударил ли я, но надеюсь, что это все равно поможет.

Answer 3

<div id="social"> 
</div> 
<script id="socialTemplate" type="text/plain"> 
<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div> 
<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div> 
<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div> 
<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div> 
<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon 
</script> 
<script type="text/javascript"> 
window.addEventListener("load",function(){ 
document.getElementById("social").innerHTML = document.getElementById("socialTemplate").innerHTML; 
}); 
</script> 

Поскольку socialTemplate имеет тип text/plain, он рассматривается как таковой. Но когда вы размещаете его содержимое в пустой социальный тег, браузер его инициализирует.

Answer 4

Просто шлепать все это в вызове функции html():

$(document).ready(function() { 
    $('#social').html(
     '<div id="socialButton"><div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script><fb:like href="http://example.com" send="false" layout="button_count" width="100" show_faces="false" font="arial"></fb:like>&nbsp;&nbsp;&nbsp;<<< Facebook Like</div>' + 
     '<div id="socialButton"><g:plusone></g:plusone>&nbsp;<<< Google +1</div>' + 
     '<div id="socialButton"><a href="http://twitter.com/share" class="twitter-share-button" data-count="horizontal" data-via="example" ></a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script><<< Twitter Tweet</div>' + 
     '<div id="socialButton"><a class="DiggThisButton DiggCompact"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Digg this</div>' + 
     '<div id="socialButton"><script src="http://www.stumbleupon.com/hostedbadge.php?s=1"></script>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<<< Stumble Upon/div>' 
     ); 
}); 

Оставьте <div id="social"></div> на странице, пусто.

Answer 5

Я не могу исправить это выше, он продолжает разлагать код или отображает код в месте расположения сценария, а не в социальном div.

мне было интересно, если это будет иметь возможность загружать скрипты позже при загрузке следующих с задержкой и оставляя остальные нетронутыми:

<script src="resources/scripts/main_script.js" type="text/javascript"></script> 
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> 
<script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script> 
<script src="http://connect.facebook.net/en_US/all.js#appId=229705657056288&amp;xfbml=1"></script> 

, так как моя главная цель состоит в том, чтобы р

Answer 6

Вы могли бы просто использовать атрибут defer на ваших <script> теги:

<script type="text/javascript" src="https://apis.google.com/js/plusone.js" defer="defer"></script> 

Это заставляет их быть загружен после того, как страница отображается.