Facebook的飼料iframe延遲加載

Question

出於性能的目的，我正在尋找一種方法來懶惰加載粉絲頁面飼料從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> 

標籤（在無形之中TI的用戶），我可以以任何方式要求的Facebook服務器構建iframe，並根據需求提供內容？

Answer 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' 
     }) 
    ); 
}); 

Answer 2

一個例子設置的URL，而不是在src標題，這樣的jQuery可以動態設置的SRC用所需的URL來加載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"); 
});