如何延迟加载 Facebook 的 Like Box？

Question

I have found a tutorial for lazy loading Facebook's like box , but it's appropriate only if you use one FB widget on a page.我找到了一个关于延迟加载 Facebook 的喜欢框的教程，但只有当您在页面上使用一个 FB 小部件时才适合。

How would it look like if you want to load "like button" normally, but would like to lazy load "like box", ie load it only if the user scrolls and like box is in the viewport?如果您想正常加载“like button”，但想延迟加载“like box”，即仅当用户滚动并且like box在视口中时才加载它，会是什么样子？

Also, is it possible to do it without any plugins nad possibly without jquery, ie using only pure javascript?另外，是否可以在没有任何插件的情况下做到这一点，可能没有 jquery，即只使用纯 javascript？

Here is the mentioned code:这是提到的代码：

/** 
* check if facebookHolder is in viewport, and then load Like Box widget 
*/ 
$(document).ready(function() { 
function checkScrollingForWidget(event) { 
    $('#facebookHolder:in-viewport').each(function() { 
    $('#facebookHolder').append('<div id="fb-root"></div>'); 
    $('#facebookHolder').append('<fb:like-box href="http://www.facebook.com/forexagone" width="300" show_faces="true" stream="false" header="false"></fb:like-box>'); 

    jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() { 
        FB.init({status: true, cookie: true, xfbml: true}); 
    }); 

    $(window).unbind('scroll', checkScrollingForWidget); 
} 

$(window).bind('scroll', checkScrollingForWidget); 
});

Since Facebook's like box is so widely used and can slow down page loading a bit (even if it's async.), I was quite surprised to see that there are no newer tutorials how to do this.由于 Facebook 的点赞框使用如此广泛，并且会稍微减慢页面加载速度（即使它是异步的。），我很惊讶地看到没有更新的教程如何做到这一点。 Is it possible at all?有可能吗？

Thank you in advance for your ideas.预先感谢您的想法。

This is Markus' code in a simple HTML document:这是 Markus 在一个简单的 HTML 文档中的代码：

    <html><head>
<meta content="text/html; charset=UTF-8" http-equiv="content-type">
<title>Lazy Load</title>

<script src="http://code.jquery.com/jquery-git.js" type="text/javascript"></script>
<script src="http://www.appelsiini.net/download/jquery.viewport.js" type="text/javascript"></script>


  <style type="text/css">
    .facebookHolder {
    height: 50px;
    background: #ccc;
}
  </style>



<script type="text/javascript">
$(document).ready(function() {
    jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
        // initiate like boxed already in viewport as soon as fb sdk loaded.
        checkScrollingForWidget();
    });

    function checkScrollingForWidget(event) { 
        $('.facebookHolder:in-viewport').each(function(index, item) {
            if (!$(item).hasClass('fb_loaded')) {
                $(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
                $(item).addClass('fb_loaded');
                FB.XFBML.parse();
            }
        }); 
    }

    $(window).bind('scroll', checkScrollingForWidget); 
});
</script>


</head>
<body>


<div id="fb-root"></div>

<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>


</body></html>

Answer 1

This could be inteteresting for me too so I just fixed the tutorial script:这对我来说也很有趣，所以我只修复了教程脚本：

JSFiddle JSFiddle

Of course you need to import jquery and the viewport plugin (if you want to use it).当然你需要导入jquery和viewport插件（如果你想使用它）。

<script src="jquery.js"></script>
<script src="jquery.viewport.js"></script>

Then include fbroot tag only once and give the holders an specific data-url attribute because loading one url multiple times doesn't seem to be possible.然后只包含一次 fbroot 标签，并为持有者提供一个特定的 data-url 属性，因为多次加载一个 url 似乎是不可能的。 Late we will read out this data-attribute.晚点我们会读出这个数据属性。

<div id="fb-root"></div>

<div class="facebookHolder" data-url="https://www.facebook.com/Google"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/yahoo"></div>
<p style="height: 500px;"></p>
<div class="facebookHolder" data-url="https://www.facebook.com/stackoverflowpage"></div>

Then use the following jQuery code:然后使用以下 jQuery 代码：

$(document).ready(function() {
    jQuery.getScript('http://connect.facebook.net/en_US/all.js#xfbml=1', function() {
        // initiate like boxed already in viewport as soon as fb sdk loaded.
        checkScrollingForWidget();
    });

    function checkScrollingForWidget(event) { 
        $('.facebookHolder:in-viewport').each(function(index, item) {
            if (!$(item).hasClass('fb_loaded')) {
                $(item).append('<fb:like-box href="' + $(item).attr('data-url') + '" width="300" show_faces="true" stream="false" header="false"></fb:like-box>');
                $(item).addClass('fb_loaded');
                FB.XFBML.parse();
            }
        }); 
    }

    $(window).bind('scroll', checkScrollingForWidget); 
});

Answer 2

您可以随时动态添加 Facebook 小部件，但需要在将其添加到 DOM 后调用FB.XFBML.parse 。

如何延迟加载 Facebook 的 Like Box？

问题描述

2 个解决方案

解决方案1
3 2013-12-28 13:24:56

解决方案2
3 2013-12-28 23:39:15

如何延迟加载 Facebook 的 Like Box？

问题描述

2 个解决方案

解决方案1 3 2013-12-28 13:24:56

解决方案2 3 2013-12-28 23:39:15

解决方案1
3 2013-12-28 13:24:56

解决方案2
3 2013-12-28 23:39:15