Facebook feed iframe 延迟加载答案

【问题标题】：Facebook feed iframe lazy loadingFacebook feed iframe 延迟加载
【发布时间】：2011-10-03 17:35:55
【问题描述】：

出于性能目的，我正在寻找一种将粉丝页面提要从 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 及其按需内容？

【问题讨论】：

一定要使用XFBML吗？可以改用 iframe 吗？

标签： facebook lazy-loading

【解决方案1】：

如果您可以使用 iframe 代替 XFBML，请使用 jQuery (jsFiddle) 执行此操作：

$(document).ready(function()
{
    $('#container_for_fb_box').append($('<iframe>')
        .attr({
            'src': "http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fplatform&amp;width=292&amp;colorscheme=light&amp;show_faces=false&amp;stream=true&amp;header=false&amp;height=395", 
            'scrolling': 'no',
            'allowTransparency': 'true'
        })
        .css({
            'border':'none', 
            'overflow': 'hidden', 
            'width': '292px', 
            'height': '395px'
        })
     );
 });

【讨论】：

【解决方案2】：

使用 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"); 
});

【讨论】：