0

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



    });
4

2 に答える 2

2

数時間の調査の後、私はこの問題を理解することができました (FB の Like ボックスと組み合わせた Infinite Scroll で発生した問題)。Infinite Scroll は正しい HTML タグを作成しますが、ウィジェットが Facebook によって解析されない場合、ウィジェットがまだブラウザーに表示されないという問題があります。ここで複雑になり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>
于 2013-03-10T21:04:04.463 に答える