Question

我懒得加载我的Facebook评论插件，但插件需要一段时间才能加载。我希望用户通过添加加载GIF来了解它的加载情况。我知道如何添加加载GIF，但是一旦注释插件完全加载，我就不知道如何删除它。这就是我尝试过的：

<img id="loading" src="/media/assets/loading.gif">
<script>
    function loadAPI() {

        var js = document.createElement('script');
         js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
        document.body.appendChild(js);
        js.onload=loading();

    }

    window.onscroll = function () {
        var rect = document.getElementById('comments').getBoundingClientRect();
        if (rect.top < window.innerHeight) {
            loadAPI();
            window.onscroll = null;

        }

    }

    //Function used to remove GIF 
    function loading(){
        var loading = document.getElementById('loading');
        loading .parentNode.removeChild(loading); 
    }
    </script>
    <div id="fb-root"></div>

<div id="comments" class="fb-comments" data-href="http://example.com" data-numposts="5" data-colorscheme="light"></div>

我正在使用的代码，当用户滚动到评论部分时显示GIF，然后在调用所有函数后将其删除。这不是我想要的。我希望在显示Faceboook评论插件后将其删除。在插件显示之前，我的代码会在很长一段时间内删除GIF。我该怎么做才能解决这个问题？

Answer 1

首先，当您实际需要将引用传递给js.onload时，您正在调用加载函数，因此在Facebook插件甚至完成加载javascript之前执行加载回调。所以，改变

js.onload=loading();

到

js.onload=loading;

现在，当插件本身加载完成后，gif会被删除，但我们可以做得更好。该插件将设置一个全局对象FB，您可以使用它来订阅评论的渲染事件（source），如下所示：

 FB.Event.subscribe("xfbml.render", function(){
        //The comments are now rendered, remove the image
 });

全部放在一起：

<img id="loading" src="/media/assets/loading.gif">
<script>
function loadAPI() {

    var js = document.createElement('script');
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.5";
    document.body.appendChild(js);
    js.onload=loading;

}

window.onscroll = function () {
    var rect = document.getElementById('comments').getBoundingClientRect();
    if (rect.top < window.innerHeight) {
        loadAPI();
        window.onscroll = null;

    }

}

//Function used to remove GIF 
function loading(){
    FB.Event.subscribe('xfbml.render', function(){
        var loading = document.getElementById('loading');
        loading.parentNode.removeChild(loading); 
    });
}
</script>
<div id="fb-root"></div>

显示加载GIF并在加载脚本后删除

1 个答案: