CODEWITHSUNDEEP
javascriptjquery
Dorel
Dorel

Reputation: 113

add a loading animation until a specific javascript finish loading

I have an external JavaScript src which I want to add a loading animation until it's finish loading:

<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>

I'm currently using jQuery (window).load, but its waiting until all page is fully loaded, I want to wait only for that specific code:

<script>$(window).load(function(){$(".loadingif").hide();});</script>

Update: This is my code as you have suggested, it's is not working, what I'm doing wrong---

some text.....
<span class="loading-gif"></span>
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script>hideLoading();</script>
some text.....
<script>function hideLoading(){$(".loading-gif").hide();}</script>

Upvotes: 0

Views: 407

Answers (2)

Feathercrown
Feathercrown

Reputation: 2591

Hopefully this works:

<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script type="text/javascript">
    hideLoadingThingy();
</script>

The second script should run after the first one finishes loading. This is because it is included after the first one, so the first one is loaded first.

Unless the methods in xxx.js are called asynchronously, your browser will only execute one task at a time. Read more about that here

Update:

Use this:

some text 2.....
<span class="loading-gif"></span>
<script src="https://xxxx.domain.com/xxx.js" type="text/javascript"></script>
<script type="text/javascript">$(".loading-gif").hide();</script>
some text 2.....

Upvotes: 3

Joe
Joe

Reputation: 170

You could key off of the expected javascript object that will be loaded into global scope:

(function checkValue(){
    if (libraryValue === undefined){
        setTimeout(checkValue, 100);
    } else {
        $(".loadingif").hide();
    }
})();

I would use Feathercrown's solution unless you choose to load that library asynchronously.

Upvotes: 0

Related Questions