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来执行此操作并计划使用$（document）.ready（function（）{}）;确保在加载社交网络之前加载文档。

我知道我可以使用什么，以及我如何实现它...我想我要离开div #socail并将它文档。写入它但我不知道如何将它拉下来。

所有建议都被挪用。

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>

因为我的主要目标是p

Answer 6

您只需使用defer代码中的<script>属性：

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

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

延迟社交网络加载

6 个答案: