Question

我用很少的场景制作游戏。每个场景都有自己的javascript，我想异步加载，之后将特定的场景文件加载到div中。

这是我的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>

这是两个有效的功能。

第一个

$(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);
        })();

    });

});

这是第二个

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

我想要第二个命令：$（“＃test”）。load（'div.html'）;在脚本加载成功完成后直接执行。

我该怎么做？

Answer 1

将另一个.load()添加到另一个.load()函数

的回调中

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

因为我意识到你问题的标题与你所问的是什么不同

我想要第二个命令：$（“＃test”）。load（'div.html'）;成为脚本加载成功完成后直接执行。

您需要使用具有callback功能的脚本加载器，如下面的脚本加载器

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);

好吧有很多script loaders，但根据我的经验，上面的两个对我来说真的很好

另一个函数完成后如何执行.load函数？请参阅示例中的函数

1 个答案: