無限のスクロールとフェイスブックのコメント

Question

私は各投稿にFacebookのコメントが追加されたtumblrのブログを持っています。

私もinfiniteScrollを使用しています。

ブラウザがスクロールしてコンテンツがスクロールすると、すべてを再度初期化しなければならなかったので、どうすればFacebookのコメントを再初期化できますか？ここで

は私のコードと無限スクロールのためのコールバック

function initialiseDescriptions(){ 
     $(".description").each(function(){ 

      $(this).click(function(){ 
       //alert(); 
       var postId = $(this).find(".id")[0].value; 

        $.openDOMWindow({ 
         windowSourceID:'#post-' + postId,   
         windowPadding:20, 
         windowBGColor:'#fff', 
         overlayOpacity: 60, 
         borderSize:'0', 
         height:710, 
         width: 410, 
         anchoredSelector:'.defaultDOMWindow' 
        }); 

        return false; 
      }) 
     }); 


    //Pretty sure I need to reinitialize facebook comments in here but the following code doesn't work 

$("<div id='fb-root'></div>'.appendTo("body"); 
(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_GB/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk')); 


     } 

    $(window).load(function() { 

     initialiseDescriptions(); 

     var $content = $('#content'); 

     if($content.infinitescroll) { 

      $content.masonry({ 
       itemSelector: '.posts', 
       //columnWidth: 235, 
       isAnimated: true 
      }),  
      $content.infinitescroll({ 
       navSelector : 'div#pagination', 
       nextSelector : 'div#pagination div#nextPage a', 
       itemSelector : '.posts', 
       loading: { 
        finishedMsg: '', 
        img: 'http://static.tumblr.com/dbek3sy/pX1lrx8xv/ajax-loader.gif' 
       }, 
       bufferPx  : 500, 
       debug   : false, 
      }, 
      // call masonry as a callback. 
      function(newElements) { 
       var $newElems = $(newElements); 
       $newElems.hide(); 
       // ensure that images load before adding to masonry layout 
       $newElems.imagesLoaded(function(){ 
        $content.masonry('appended', 
         $newElems, true, 
         function(){$newElems.fadeIn();} 
        ); 

       initialiseDescriptions(); 

       }); 
      }); 
     }else{ 
      $content.masonry({ 
       itemSelector: '.posts', 
       //columnWidth: 235, 
       isAnimated: true 
      }); 
     } 



    }); 

Answer 1

は（私は無限スクロールとFBのようボックスと組み合わされていたことを）私はこの問題を理解するために管理し、研究の数時間後です。 Infinite Scrollは正しいHTMLタグを作成しますが、Facebookによって解析されないとウィジェットがブラウザに表示されないという問題があります。ここで複雑になるのは、コールバック関数でFB.XFBML.parse()と呼ぶだけで、ページ上のすべてのウィジェットがリロードされます。これは重く、最適ではないし、ウィジェットがたくさんあると、ページが壊れているように見える。私が思いついた解決策は、最新の要素だけを解析することです。私はそれをどのようにしたのですか：

Answer 2

ええ！ FB.XFBML.parse（）を追加しただけです。成功関数については、それは私のために働いている！