FacebookFeed iframe延迟加载

为了提高性能，我正在寻找一种将fan页面提要从facebook延迟加载到我的站点的方法。 由于此提要在用户交互（单击）后可见，我想知道是否

<fb:fan profile_id="XXXXXX" href="http://www.facebook.com/XXXX.XXX" width="292" show_faces="0" stream="true" height="390px" header="false" css="XXX"></fb:fan>

---

标记在我的标记中（虽然对用户不可见），我可以通过任何方式请求facebook服务器构建iframe及其按需内容？

如果您可以使用

iframe

而不是XFBML，请使用jQuery（）执行此操作：

$（文档）.ready（函数（）
{
$（'#容器_用于_fb_box'）。附加（$（''）
艾特先生({
“src”：”http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&；宽度=292和颜色方案=灯光和显示面=假和流=真和标题=假和高度=395“，
“滚动”：“否”，
“allowTransparency”：“true”
})
.css({
“边界”：“无”，
“溢出”：“隐藏”，
“宽度”：“292px”，
“高度”：“395px”
})
);
});

一个用URL而不是src设置标题的示例，以便jquery可以用所需的URL动态设置src以加载iframe

//Trying to load the URL dynamically did not work for me
//hence using the title as a workaround
<iframe id="facebookFrame" title="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%xxxxxx%xxxxxx&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;height=590" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 300px; height: 590px;"></iframe>


//on click 
$("#yourButton").click(function(event) {
   $("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
   $("#facebookFrame").removeAttr("title");    
});

//using a timer to load the iframe after 2 seconds
window.setTimeout(function() {
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
    $("#facebookFrame").removeAttr("title");
}, 2000);

//on user scroll
$(window).bind("scroll", function(event) {
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
    $("#facebookFrame").removeAttr("title"); 
});

//尝试动态加载URL对我无效
//因此，使用标题作为解决方法
//点击
$（“#您的按钮”）。单击（函数（事件）{
$（“#facebook frame”）.attr（“src”），$（“#facebook frame”）.attr（“title”）；
$（“#facebookFrame”）.removeAttr（“标题”）；
});
//使用计时器在2秒后加载iframe
setTimeout（函数（）{
$（“#facebook frame”）.attr（“src”），$（“#facebook frame”）.attr（“title”）；
$（“#facebookFrame”）.removeAttr（“标题”）；
}, 2000);
//用户滚动
$（窗口）.bind（“滚动”），函数（事件）{
$（“#facebook frame”）.attr（“src”），$（“#facebook frame”）.attr（“title”）；
$（“#facebookFrame”）.removeAttr（“标题”）；
});

它必须使用XFBML吗？它可以改用iframe吗？

//Trying to load the URL dynamically did not work for me
//hence using the title as a workaround
<iframe id="facebookFrame" title="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%xxxxxx%xxxxxx&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=true&amp;header=true&amp;height=590" scrolling="no" frameborder="0" style="border: none; overflow: hidden; width: 300px; height: 590px;"></iframe>


//on click 
$("#yourButton").click(function(event) {
   $("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
   $("#facebookFrame").removeAttr("title");    
});

//using a timer to load the iframe after 2 seconds
window.setTimeout(function() {
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
    $("#facebookFrame").removeAttr("title");
}, 2000);

//on user scroll
$(window).bind("scroll", function(event) {
    $("#facebookFrame").attr("src", $("#facebookFrame").attr("title"));
    $("#facebookFrame").removeAttr("title"); 
});