javascript - 如何创建一个事件以在所有插件启动后触发？

Question

我的网站有一个 ajax 导航。因此，为了不让页面的每个部分都有一个 js 脚本，我选择创建一个单独的 js，其中包含所有必要的代码以最小化 HTTP 请求。

然后我编写了如下代码:

HTML

<a href="#" data-pageindex="0">Home</a>
<a href="#" data-pageindex="1">Contact</a>
<a href="#" data-pageindex="2">Portfolio</a>

<div id="page-home"></div>
<div id="page-contact"></div>
<div id="page-portfolio"></div>

JS

var urls = ['home', 'contact', 'portfolio'];    

$("[data-pageindex]").on("click", function(e){
    var index = parseInt($(this).data("pageindex"));

    load_section(index);

    e.preventDefault();
    return false;
});

function load_section(index_load){

    var id_section = "#page-" + urls[index_load]; 

    if (! isEmpty( $(id_section) ) ){
        return;
    }

    switch(index_load){
        case 0: $(id_section).load("/application/ajax/home.html",       load_home); break;
        case 1: $(id_section).load("/application/ajax/contact.html",    load_contact); break;
        default: $(id_section).load("/application/ajax/portfolio.html", load_portfolio);
    }
}

function load_home(){
    // about 180 lines of code
}

function load_contact(){
    // about 104 lines of code
}

function load_portfolio(){
    // about 95 lines of code
}

如您所见，函数 load_home、load_contact 和 load_portfolio 在获取该部分的 html 之前被调用，在它们中我有几个插件的初始化(很多 select2 ，例如)。我想创建一个事件，在所有事件启动时显示警报。

这些是我的问题:

1. 有一个简单的方法来触发它吗？
2. 是否值得已经加载所有的 html，并且只在用户按下菜单中的链接时才调用初始化所有的函数？
3. 将代码放在单独的 js 脚本中并使用 jQuery.getScript() 函数加载它们会更好吗？

Answer 1

在窗口完成所有 html 元素的加载后调用这些函数:

$(window).load(function(){
   load_home();
   load_contact();
   load_portfolio();
});