顯示加載的GIF，並在腳本加載后刪除

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 ）的render事件，如下所示：

 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>