How to execute .load function after another function finished? See the functions in example

Question

I making a game with few scenes. Each scene have it's own javascript which i want to load asynchronously and after that to load the particular scene file into div.

Here is my html index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"> </script>

    <script type="text/javascript" src="first.js" id="first" ></script>
</head>
<body>

<div id="test" style="width: 800px; height: 400px; background: black">
    hello

</div>
                                    <button id="submit">submit</button>

</body>
</html>

Here is two working functions.

First one

$(document).ready(function() {

    $('#submit').click(function() {


        (function() {
           var myscript = document.createElement('script');
            myscript.type = 'text/javascript';
            myscript.src = ('second.js');
            var s = document.getElementById('first');
            s.parentNode.insertBefore(myscript, s);
        })();

    });

});

And here is the second

 $( "#test" ).load('div.html');

I want the second command: $( "#test" ).load('div.html'); to be executed straight after the scripts loading finished successfully.

How can i do that?

Netorica · Accepted Answer · 2013-05-03 18:15:50Z

2

just put the another .load() to the call back of another .load() function

$( "#targetelement" ).load('myajaxpage.php', function(){
      //call back
       $( "#targetelement" ).load('myajaxpage.html', function(){
             //call back
      }) 
});

as I realized the the title of your question is different on what you are asking which is

I want the second command: $( "#test" ).load('div.html'); to be executed straight after the scripts loading finished successfully.

you need to use a script loader that have callback functionality like the following script loaders below

http://headjs.com/

head.js("/path/to/jquery.js", "/google/analytics.js", "/js/site.js", function() {

   // your function you want to call after the scripts above is loaded

});

http://yepnopejs.com/

yepnope.injectJs("jquery.js", function () {
  // your function you want to call after the scripts above is loaded

}, {
  charset: "utf-8"
}, 5000);

well there are a lot of script loaders but the two above in my experience were really good for me

edited May 3, 2013 at 18:15

answered May 3, 2013 at 18:01

Netorica

19.5k19 gold badges78 silver badges109 bronze badges

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

3 Comments

Ilya Libin Over a year ago

That is not an answer to my question

Ilya Libin Over a year ago

Actually i want to load some scripts for the scene1, and after i go to the scene2 i want to replace those scripts with others. So i have to give them an id or something (in order to replace them after) So i prefer to use the function that i wrote. Or is it any ability to replace scripts with head.js ??

Netorica Over a year ago

well you need to try it by yourself, you can replace scripts but replacing the variables and objects stored in the memory that came from the previous scripts cannot be replaced without manually doing it in code.. you need to put them in a single namespace so if you changed that namespace everything will be replaced (like what jquery does with their single common namespace which is the $)

Collectives™ on Stack Overflow

How to execute .load function after another function finished? See the functions in example

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related