CODEWITHSUNDEEP
javascriptjquery
user2896120
user2896120

Reputation: 3282

Display loading GIF and remove after script has loaded

I am lazy loading my Facebook comments plugin, but the plugin takes a while to load. I want the user to know that it's loading by adding a loading GIF. I know how to add the loading GIF, but I don't know how to remove it once the comments plugin has loaded fully. This is what I've tried:

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

The code I am using, displays the GIF when the user scrolls to the comments section part, and then removes it after all the functions have been invoked. This is not what I want. I want it to get removed after the Faceboook Comments plugin has been displayed. My code removes the GIF a good bit of time prior the plugin displaying. What can I do to fix this issue?

Upvotes: 0

Views: 192

Answers (1)

noppa
noppa

Reputation: 4066

First of all, you are invoking the loading function when you'd actually need to pass the reference to js.onload, so the loading callback gets executed before the Facebook plugin has even finished loading the javascript. So, change

js.onload=loading();

to

js.onload=loading;

Now the gif gets removed when the plugin itself has finished loading, but we can do better than that. The plugin will set a global object FB which you can use to subscribe to the render event of the comments (source), like so:

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

Putting it all together: 

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

Upvotes: 2

Related Questions