延迟社交网络加载

使用 JavaScript，您可以使用 setTimeout 在延迟后执行代码。 例如：

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

这将在 10,000 毫秒（10 秒）后执行匿名函数中的代码。

或者，您可以让代码在页面中正常运行，但将其隐藏。在您选择的延迟之后，揭示社交媒体元素。 这可能更简单，因为您可能希望假设Facebook和Twitter脚本将运行未知代码。

在类似的场景中，我实现了一个小函数来加载使社交按钮正常工作所需的脚本：

_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是一个简单的命名空间，只是为了不污染全局范围

我不知道我是否击中了重点，但希望这无论如何都有帮助。

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

因为社交模板有类型text/plain所以它被视为这样。但是当您将其内容放入空的社会性标签中时，浏览器将对其进行初始化。

只需在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>留空。

我无法使用上面的那些修复它，它会不断损坏代码或在脚本的位置而不是在社交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>

因为我的主要目标是 p

简单地在<script>标签上使用defer属性：

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

这会导致它们在页面呈现后加载。