무한 스크롤 및 페이 스북 코멘트

Question

각 게시물에 페이스 북 코멘트가 추가 된 tumblr 블로그가 있습니다.

저는 또한 infiniteScroll도 사용하고 있습니다.

브라우저가 스크롤되고 내용이 스크롤되면 모든 것이 다시 초기화되어야하므로 어떻게 페이스 북의 주석을 다시 초기화해야합니까?

여기에 (내가 FB처럼 상자와 함께 무한 스크롤 있다고) 내 코드와 나는이 문제를 이해하기 위해 관리 연구의 몇 시간 후 무한 스크롤

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

에 대한 콜백입니다. Infinite Scroll은 올바른 HTML 태그를 만들지 만 문제는 페이스 북에서 파싱되지 않으면 위젯이 브라우저에 표시되지 않는다는 것입니다. 이제 복잡한 부분이 있습니다. 콜백 함수에서 FB.XFBML.parse()을 호출하면 페이지의 모든 위젯이 다시로드됩니다. 이것은 무겁고 전혀 최적이 아니며 위젯이 많으면 페이지가 깨지는 것처럼 보입니다. 필자가 생각해 낸 해결책은 최신 요소 만 파싱하는 것입니다. 방법은 다음과 같습니다.

<script type="text/javascript"> 
     $('#content').infinitescroll({ 
      navSelector : "div.navigation",    
       // selector for the paged navigation (it will be hidden) 
       nextSelector : "div.navigation a:first",  
       // selector for the NEXT link (to page 2) 
       itemSelector : "#content div.post", 
       // selector for all items you'll retrieve 
       debug: true 
       }, 
       function(arrayOfNewElems) { 
        for(var i=0;i<arrayOfNewElems.length;i++) 
         FB.XFBML.parse(arrayOfNewElems[i]); 
       } 
      ); 
    </script> 

Answer 2

예! FB.XFBML.parse() 만 추가했습니다. 성공 함수에 그것은 나를 위해 일했습니다!