我找到了 tutorial for lazy loading Facebook's like box , 但仅当您在页面上使用一个 FB 小部件时才合适。
如果你想正常加载“like button”，但又想延迟加载“like box”，那会是什么样子，i. e.仅当用户滚动并且喜欢的框在视口(viewport)中时才加载它？
此外，是否可以在没有任何插件的情况下做到这一点，并且可能没有 jquery，我。 e.仅使用纯 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>
最佳答案
您可以随时动态添加 Facebook 小部件，但您需要调用 FB.XFBML.parse将其添加到 DOM 之后。
关于javascript - 如何延迟加载 Facebook 的 Like Box？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20814661/