php - 延迟社交网络加载

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 并让它 document.write 到它，但我不知道如何才能实现它。

所有建议均已采纳。

score 1 · Accepted Answer

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

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

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

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

score 0 · Accepted Answer

您可以简单地使用标签defer上的属性：<script>

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

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

score 0 · Accepted Answer

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

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

我不知道我是否说到点子上了，但无论如何希望这会有所帮助。

score 0 · Accepted Answer

<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，所以它被视为这样。但是，当您将其内容放入空的社交标签时，浏览器会对其进行初始化。

score 0 · Accepted Answer

只需在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>页面，为空。

score 0 · Accepted Answer

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

php - 延迟社交网络加载

6 回答 6

Related

Reference