Question

我有一个tumblr博客，每条帖子都添加了facebook评论。

我也在使用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

经过几个小时的研究后，我设法理解了这个问题（我使用Infinite Scroll和FB的Like框一起）。无限滚动确实创建了正确的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>

Answer 2

呀！我只添加了FB.XFBML.parse（）;关于成功的功能，它对我有用！

无限滚动和Facebook评论

2 个答案: