Javascript Beginner: How do I add preloader to HTML onClick?

Question

I have a script set up that is running fine, but it takes a while to load and I would like to use a "loading" image before the script loads so that the user is not lost.

Currently I am using this in my HTML

<div style="text-align:center;">
<a style="color:blue;" onclick="javascript:launchWS('http://clients.mindbodyonline.com/ws.asp?studioid=888888&amp;stype=-9&amp;sView=day&amp;sTrn=2');" href="#">Book Online</a>
</div><br />

I have been trying to add various snippets of javascript I have found around the web into the onclick"" but it breaks the functionality of the root code.

My guess is that I need to write the whole thing out with javascript, but I'm lost on where to even begin. Everything I find assumes you have a firm grasp of how to implement javascript. Unfortunately, I'm just a beginner, but I would really like to get this working.

Answer 1

First they way you are writing code is not wrong but it recommended to use script tag and write your javascript code there. We use

$(ready).document({}) 

to run the javascript after page load so do not use this one may be helpful for you.

Answer 2

What I understand is that you need to show a spinner till the script is loaded-

There are multiple ways to go about this-using a image to block UI until script loads etc.

But the easiest way is to use a plugin -Spin.js found at http://fgnass.github.io/spin.js/

Hope this helps.