顯示加載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）渲染事件，像這樣：

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>