add a loading animation until a specific javascript finish loading

Question

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>

Can you control your page enough to run a specific JS block directly after that file has been included? — James Thorpe
– James Thorpe, Commented Oct 11, 2016 at 12:30

Feathercrown · Accepted Answer · 2016-10-12 19:58:37Z

3

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

edited Oct 12, 2016 at 19:58

answered Oct 11, 2016 at 12:31

Feathercrown

2,5911 gold badge19 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

James Thorpe Over a year ago

That's what I was getting at with my comment, so +1, but an explanation of why this works would be good.

Feathercrown Over a year ago

@JamesThorpe Yeah, I noticed your comment as I was writing my answer. :)

Dorel Over a year ago

@Feathercrown I did as you suggested but it is not working, what am i doing wrong?

Feathercrown Over a year ago

@Dorel You have to replace hideLoadingThingy() with whatever code hides your loading thingy. In your case, this would be hideLoading().

Dorel Over a year ago

@Feathercrown I have done as you suggested, the image is not showing, are you sure that second script will run after the first one finishes loading?

|

Joe · Accepted Answer · 2016-10-11 12:44:53Z

0

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.

edited Oct 11, 2016 at 12:44

answered Oct 11, 2016 at 12:32

Joe

1701 silver badge7 bronze badges

3 Comments

Feathercrown Over a year ago

I was thinking of something like this, but it slows down the website more than my solution.

Joe Over a year ago

Checking a javascript value in memory 10 times a second is trivial.

Feathercrown Over a year ago

Thanks for the mention! That asynchronous point is a good one though.

Collectives™ on Stack Overflow

add a loading animation until a specific javascript finish loading

2 Answers 2

7 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related