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

我懒得加载我的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>

函数loadAPI（）{
var js=document.createElement（'script'）；
js.src=“//connect.facebook.net/en_US/sdk.js#xfml=1&version=v2.5”；
document.body.appendChild（js）；
js.onload=load（）；
}
window.onscroll=函数（）{
var rect=document.getElementById（'comments'）.getBoundingClientRect（）；
if（矩形顶部<窗口内部高度）{
loadAPI（）；
window.onscroll=null；
}
}
//用于删除GIF的函数
函数加载（）{
var loading=document.getElementById（'loading'）；
加载.parentNode.removeChild（加载）；
}

---

我使用的代码在用户滚动到comments部分时显示GIF，然后在调用所有函数后将其删除。这不是我想要的。我希望它被删除后，Faceboook评论插件已经显示。我的代码在插件显示之前删除了GIF。我能做些什么来解决这个问题呢？

首先，当您实际需要将引用传递给

js.onload

时，您正在调用加载函数，因此加载回调在Facebook插件加载完javascript之前执行。 所以，改变

js.onload=loading();

到

现在，当插件本身完成加载后，gif就会被删除，但我们可以做得更好。该插件将设置一个全局对象

FB

，您可以使用该对象订阅注释（）的呈现事件，如下所示：

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

总而言之：

函数loadAPI（）{
var js=document.createElement（'script'）；
js.src=“//connect.facebook.net/en_US/sdk.js#xfml=1&version=v2.5”；
document.body.appendChild（js）；
js.onload=加载；
}
window.onscroll=函数（）{
var rect=document.getElementById（'comments'）.getBoundingClientRect（）；
if（矩形顶部<窗口内部高度）{
loadAPI（）；
window.onscroll=null；
}
}
//用于删除GIF的函数
函数加载（）{
FB.Event.subscribe（'xfbml.render'，function（）{
var loading=document.getElementById（'loading'）；
加载.parentNode.removeChild（加载）；
});
}

首先，当您实际需要将引用传递给

js.onload

时，您正在调用加载函数，因此加载回调在Facebook插件加载完javascript之前执行。 所以，改变

js.onload=loading();

到

现在，当插件本身完成加载后，gif就会被删除，但我们可以做得更好。该插件将设置一个全局对象

FB

，您可以使用该对象订阅注释（）的呈现事件，如下所示：

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

总而言之：

函数loadAPI（）{
var js=document.createElement（'script'）；
js.src=“//connect.facebook.net/en_US/sdk.js#xfml=1&version=v2.5”；
document.body.appendChild（js）；
js.onload=加载；
}
window.onscroll=函数（）{
var rect=document.getElementById（'comments'）.getBoundingClientRect（）；
if（矩形顶部<窗口内部高度）{
loadAPI（）；
window.onscroll=null；
}
}
//用于删除GIF的函数
函数加载（）{
FB.Event.subscribe（'xfbml.render'，function（）{
var loading=document.getElementById（'loading'）；
加载.parentNode.removeChild（加载）；
});
}

尝试替换

js.onload=load

for

js.onload=load（）

，放置

js.src=“//connect.facebook.net/en_US/sdk.js#xfml=1&version=v2.5”

after

js.onload=加载尝试替换
js.onload=load
for
js.onload=load（）
，放置
js.src=“//connect.facebook.net/en_US/sdk.js#xfml=1&version=v2.5”
after
js.onload=加载