Javascript/Jquery - Run scripts after other script runs

Question

I've ran into a problem with my webpage. I have a splash screen that is supposed to run when the page loads and it does that fine. I also have a loading screen that I want to run after splash screen, but I can't figure out how to make the splash screen run and then load the next line of code which would be the loading of the loading screen. How would I make the splash screen run and then the loading screen run? You can see the code below.

<script type="text/javascript">
$(window).load(function() {
     $("#spinner").fadeOut( 3000 );
})
function SplashDone() { 
         document.getElementById('splash').style.display = 'none'; 
} 
function Init() { 
        document.getElementById('splash').style.display = 'block'; 
        setTimeout(function(){ SplashDone(); }, 3000); 
}  
   window.onload = Init;
</script>
<body>
<div id="spinner">
<p>Loading</p>
</div>
<div id="splash">
<p>Splash</p>
<p><a href="#" onclick="SplashDone(); return false;">Skip</a></p>
</div>

So what I'm basically asking is how do I run as script after the page loads and then run another script after that script runs?

You realize you have a typo, SplashDOne()

adeneo
– adeneo

2014-03-13 18:18:41 +00:00
Commented Mar 13, 2014 at 18:18 — adeneo
– adeneo, Commented Mar 13, 2014 at 18:18
Seems to be working just fine -> jsfiddle.net/kdua5

adeneo
– adeneo

2014-03-13 18:28:57 +00:00
Commented Mar 13, 2014 at 18:28 — adeneo
– adeneo, Commented Mar 13, 2014 at 18:28

dfsq · Accepted Answer · 2014-03-13 18:31:51Z

3

What you can do is to showLoading screen from the splashDone function. This way you make sure that loading screen will appear in both cases: if timeout runs out, and if user clicks Skip button:

window.onload = init;

function init() {
    setTimeout(splashDone, 3000);
}

function splashDone() {
    document.getElementById('splash').style.display = 'none';
    showLoading();
}

function showLoading() {
    setTimeout(loadingDone, 3000);
}

function loadingDone() {
    document.getElementById('spinner').style.display = 'none';
}

I also added showLoading function for this purpuse and some CSS to make splash and loading be visible by default so you don't have to show them initially on page load.

Demo: http://jsfiddle.net/P8evf/1/

answered Mar 13, 2014 at 18:31

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

T J · Accepted Answer · 2014-03-13 18:35:19Z

1

Assuming #splash refers to your splash screen and #spinner refers to your loading screen, the following will hide your splash screen 3 after page is loaded and then fade out the loader within 3 seconds.

$(document).ready(function() {
 setTimeout(function(){
  $("#splash").css('display','none');
  $("#spinner").fadeOut( 3000 );
 }, 3000); 

});

update: JQ version of dfsq's FIDDLE

side note: i don't know why you are mixing JS and JQuery, IMHO it'll make more sence if you use either one of and increase readability..

edited Mar 13, 2014 at 18:35

answered Mar 13, 2014 at 18:26

T J

43.2k13 gold badges87 silver badges142 bronze badges

Comments

Jixun · Accepted Answer · 2014-03-13 18:21:09Z

0

setTimeout(function(){ SplashDOne(); }, 3000);

Should it be SplashDone?

I'm not quite sure what you are trying to do though..

answered Mar 13, 2014 at 18:21

Jixun

14011 bronze badges

2 Comments

apples Over a year ago

Yes I saw that typo but no that didn't fix what I'm going at.

Jixun Over a year ago

I'm assuming that spinner is your loading screen; put the loading code at end of SplashDone? You can also make callbacks if that's what you need.

Amit Joki · Accepted Answer · 2014-03-13 18:24:34Z

0

Put your scripts in a separate .js file and then call it to execute after you have done your work by

$.getScript('url to js file');

answered Mar 13, 2014 at 18:24

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

Collectives™ on Stack Overflow

Javascript/Jquery - Run scripts after other script runs

4 Answers 4

Demo: http://jsfiddle.net/P8evf/1/

Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Demo: http://jsfiddle.net/P8evf/1/

Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related