Question

我找到了tutorial for lazy loading Facebook's like box，但只有在页面上使用一个FB小部件时它才合适。

如果你想正常加载“喜欢按钮”，但想要懒得加载“喜欢盒子”，我会怎么样？即只有当用户滚动并且像框一样在视口中时才加载它？

此外，是否可以在没有任何插件的情况下进行，并且可能没有jquery，i。即只使用纯javascript？

以下是提到的代码：

/** 
* 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); 
});

由于Facebook的类似框被广泛使用，并且可以减慢页面加载速度（即使它是异步的。），我很惊讶地看到没有更新的教程如何做到这一点。它有可能吗？

提前感谢您的想法。

这是一个简单的HTML文档中的Markus代码：

    <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

这对我来说也很有趣，所以我只修了教程脚本：

JSFiddle

当然你需要导入jquery和viewport插件（如果你想使用它）。

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

然后只包含一次fbroot标记，并为持有者提供一个特定的data-url属性，因为多次加载一个url似乎是不可能的。迟到我们会读出这个数据属性。

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

然后使用以下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 个答案: