Javascript - 脚本加载顺序

时间:2012-04-04 11:52:18

标签: javascript jquery

我有这段代码:

$("#pop_mali_oglas").on('click', function(){
        TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'});
        $.getScript("<?php echo JS ?>vendor/jquery.ui.widget.js");
        $.getScript("<?php echo JS ?>tmpl.min.js");
        $.getScript("<?php echo JS ?>load-image.min.js");
        $.getScript("<?php echo JS ?>canvas-to-blob.min.js");        
        $.getScript("<?php echo JS ?>bootstrap.min.js");        
        $.getScript("<?php echo JS ?>bootstrap-image-gallery.min.js");     
        $.getScript("<?php echo JS ?>jquery.iframe-transport.js");
        $.getScript("<?php echo JS ?>jquery.fileupload.js");
        $.getScript("<?php echo JS ?>jquery.fileupload-ip.js");
        $.getScript("<?php echo JS ?>jquery.fileupload-ui.js");
        $.getScript("<?php echo JS ?>locale.js");        
        $.getScript("<?php echo JS ?>main.php");       
        return false;                    
});

第一行是加载最后一行(TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'});),我需要先加载,然后加载其余部分。我怎么能这样做?

4 个答案:

答案 0 :(得分:2)

我猜第二个参数(ajax true | false)默认为true,这就是它最后加载的原因。传入0作为第二个参数以强制它同步。

答案 1 :(得分:1)

问题是所有脚本都是异步加载的,这基本上意味着它们都被同时触发,这意味着它们很可能会破坏所有内容。如果你依赖它们按顺序加载..

查看this past answer关于运行函数的方法或任何javascript的方法。

像tkone在他的例子中所示,该函数将在运行所有$ .getScript函数之前首先运行TINY.box.show函数。

$("#pop_mali_oglas").on('click', function(){
          scriptload(function() {
          getscripts()
          return false; 
        });
});

function scriptload(callback) {
 tinyboxfunc()
 callback();
} 

function tinyboxfunc() {
TINY.box.show({url:'<?php echo base_url()?>form/novi_unos/<?php echo $p ?>'}); 
};

function getscripts() {
            $.getScript("<?php echo JS ?>vendor/jquery.ui.widget.js");
            $.getScript("<?php echo JS ?>tmpl.min.js");
            $.getScript("<?php echo JS ?>load-image.min.js");
            $.getScript("<?php echo JS ?>canvas-to-blob.min.js");        
            $.getScript("<?php echo JS ?>bootstrap.min.js");        
            $.getScript("<?php echo JS ?>bootstrap-image-gallery.min.js");     
            $.getScript("<?php echo JS ?>jquery.iframe-transport.js");
            $.getScript("<?php echo JS ?>jquery.fileupload.js");
            $.getScript("<?php echo JS ?>jquery.fileupload-ip.js");
            $.getScript("<?php echo JS ?>jquery.fileupload-ui.js");
            $.getScript("<?php echo JS ?>locale.js");        
            $.getScript("<?php echo JS ?>main.php"); 
};

答案 2 :(得分:1)

这些是异步加载 - 它们将按照它们加载的顺序出现。为了确保在加载之前加载了一个,最好的办法是加载一个,然后在回调中加载其他的回调。第一次加载。

这样的东西
$.getScript(first script to load, function(){
    // other get script functions
});

<小时/> 的修改

显然这不是关于脚本加载而是执行顺序。

第一个tinybox行首先执行,然而,在执行并返回其他行之后,调用它的结果可能不可见。这可能是因为tinybox命令异步加载文件。我的上述答案仍然适用,但您需要了解tinybox如何在成功完成异步事件后执行回调。

答案 3 :(得分:-1)

您应该在$ .getScript之前设置$.ajaxSetup

 $.ajaxSetup({
  async: false
 });

对于记录,$ .getScript()确实是异步执行的,因此请使用它进行设置。