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 Commentsプラグインが表示された後に削除されたい。私のコードは、プラグインを表示する前にGIFを削除しています。この問題を解決するにはどうすればよいですか？

Answer 1

最初に、js.onloadへの参照を実際に渡す必要があるときに読み込み関数を呼び出すので、FacebookプラグインがJavaScriptの読み込みを完了する前に読み込みコールバックが実行されます。プラグイン自体のロードが完了したとき だから、

js.onload=loading; 

に

js.onload=loading(); 

を変更する今、GIFは削除されるが、我々はそれよりも良い行うことができます。一緒にすべてを置く

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

：プラグインは、あなたがそうのように、コメントのrenderイベント（source）に加入するために使用できるグローバルオブジェクトFBを設定します

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