0

我有一个 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
            });
        }



    });
4

2 回答 2

2

经过几个小时的研究，我设法理解了这个问题（我在使用 Infinite Scroll 和 FB 的 Like 框时遇到了这个问题）。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 回答
1

是的！我只添加了 FB.XFBML.parse(); 在成功功能上，它对我有用！

于 2018-01-14T02:00:04.840 回答