javascript - 加载 facebook 评论插件异步

Question

我在我的网站中使用 facebook 评论插件，在我看来，当页面完全加载时该插件就会加载，这是我不希望的。

我的页面上有很多图片，页面需要一些时间才能完全加载。所以我希望 Facebook 评论能够加载，即使页面仍在进行中。

将其添加到正文标记之后。

<div id="fb-root"></div>
<script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s);
    js.id = id;
    js.async = true;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4&appId=ID";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

添加了我想要评论出现的位置。

<div class="fb-comments" data-href="{{ blog.share_url }}"
                     data-version="v2.3"
                     data-width="100%" data-numposts="5"></div>

尝试过

设置 js.async = false;

同样，当页面加载完成后，评论插件将可见。 想法？

Answer 1

经过几个月的研究，我找到了解决方案。

FB.XFBML.parse();

即使页面加载尚未完成，也会加载您的评论。

<script>
    window.fbAsyncInit = function () {
        FB.init({appId: '1422501874658917', version: 2.4, xfbml: true});

        // *** here is my code ***
        if (typeof facebookInit == 'function') {
            facebookInit();
        }
    };

    (function () {
        var e = document.createElement('script');
        e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
        e.async = true;
        document.getElementById('fb-root').appendChild(e);
    }());


    function facebookInit() {
        console.log('Found FB: Loading comments.');
        FB.XFBML.parse();
    }
</script>