Блог

Главная - Вопросы по программированию - Отложенная загрузка iframe ленты Facebook

Отложенная загрузка iframe ленты Facebook

#facebook #lazy-loading

#Facebook #отложенная загрузка

Вопрос:

В целях повышения производительности я ищу способ отложенной загрузки ленты фан-страниц 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 и его содержимого по запросу?

Комментарии:

1. Обязательно ли использовать XFBML? Может ли он использовать iframe вместо этого?

Ответ №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://www.facebook.com/platformamp;amp;width=292amp;amp;colorscheme=lightamp;amp;show_faces=falseamp;amp;stream=trueamp;amp;header=falseamp;amp;height=395", 
            'scrolling': 'no',
            'allowTransparency': 'true'
        })
        .css({
            'border':'none', 
            'overflow': 'hidden', 
            'width': '292px', 
            'height': '395px'
        })
     );
 });

Ответ №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://www.facebook.com/pages%xxxxxx%xxxxxxamp;amp;width=300amp;amp;colorscheme=lightamp;amp;show_faces=trueamp;amp;border_coloramp;amp;stream=trueamp;amp;header=trueamp;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"); 
});