Anzeige laden GIF und entfernen, nachdem Skript geladen

Question

Ich bin faul laden mein Facebook-Kommentare-Plugin, aber das Plugin dauert eine Weile, um zu laden. Ich möchte, dass der Benutzer weiß, dass er geladen wird, indem er ein Lade-GIF hinzufügt. Ich weiß, wie ich das Lade-GIF hinzufügen kann, aber ich weiß nicht, wie ich es entfernen kann, sobald das Kommentar-Plugin vollständig geladen ist. Dies ist, was ich versucht habe:

<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> 

Der Code ich verwende, zeigt das GIF, wenn der Benutzer blättert zum Profilteil Kommentare, und entfernt sie dann, nachdem alle Funktionen aufgerufen wurden. Das ist nicht was ich will. Ich möchte, dass es entfernt wird, nachdem das Faceboook Comments-Plugin angezeigt wurde. Mein Code entfernt die GIF einige Zeit vor der Anzeige des Plugins. Was kann ich tun, um dieses Problem zu beheben?

Answer 1

Als Erstes rufen Sie die Ladefunktion auf, wenn Sie die Referenz wirklich an js.onload übergeben müssen, damit der Lade-Callback ausgeführt wird, bevor das Facebook-Plugin das Laden des Javascripts beendet hat. So , ändern

js.onload=loading(); 

zu

js.onload=loading; 

Nun ist die gif entfernt wird, wenn das Plugin selbst Laden beendet ist, aber wir können das besser tun. Das Plugin wird gesetzt ein globales Objekt FB, die Sie zum Rendern Ereignis der Kommentare (source), zu abonnieren, wie so verwenden können:

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

setzen sie alle zusammen:

<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>