出于性能目的,我正在寻找一种方法来延迟从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并按需提供内容吗?
答案 0 :(得分:2)
如果您可以使用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&width=292&colorscheme=light&show_faces=false&stream=true&header=false&height=395",
'scrolling': 'no',
'allowTransparency': 'true'
})
.css({
'border':'none',
'overflow': 'hidden',
'width': '292px',
'height': '395px'
})
);
});
答案 1 :(得分:1)
使用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&width=300&colorscheme=light&show_faces=true&border_color&stream=true&header=true&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");
});