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>

Answer 2

你应该能够设置async = false。这使得它阻止，这将阻止图片加载，直到评论加载。它还取决于你如何调用加载图像的js文件。我更喜欢将它放在底部以确保所有html元素首先加载。

加载facebook评论插件异步

试过

2 个答案: