How to display a gif of preload while loading comments facebook?

I have a javascript code customized so that when scroll down the page to where is the facebook comment box not loaded. At the time the scroll reaches the site comments are loaded and appear.

But it takes about two seconds and I would like to appear while charging a lively until comments are fully charged gif. I tried to add but does not disappear when displaying the comments. Probably because javascript really do not know when they have been fully charged comments.

Is there any way to fix it?

function loadAPI() {
    var js = document.createElement('script');
    js.src = '//connect.facebook.net/en_US/sdk.js#xfbml=1&appId=73773988950&version=v2.0';
    document.body.appendChild(js);

}

window.onscroll = function () {

    if (document.getElementById("coments")) {


    var rect = document.getElementById('coments').getBoundingClientRect();

    if (rect.top < window.innerHeight) {

        loadAPI();

        window.onscroll = null;
    }

    }

Actually if dynamic content itself place a gif you know that javascript knows what he is charging and shows once loaded, removing the gif.

Solution

Put the loading gif in a <div> where you later want your facebook comments to appear and load the facebook comments into that div instead of appending them to the <body>.