jQuery Ajax加载和getScript

Question

我正在尝试设置我的网站,以便通过javascript加载主区域中的内容(某些页面需要一段时间才能呈现).但是,在使用jQuery.load(),jQuery.getScript和jQuery.ajax()时,我遇到了一些逻辑问题.

我需要能够通过getScript加载某些javascript文件,以便我可以在加载的内容中使用这些函数等.

• index.php - 显示的主文件(也包含#loading)
• js/script.js - 包含加载代码的文件
• js/*.js - 加载后我需要在#maincontent内部使用的几个javascript文件
• load.php - 正在加载到#maincontent的文件

的script.js:

$(document).ready(function() {
$('#loading').fadeIn('fast');
$('#maincontent').load('load.php', function() {
    $('#loading').fadeOut('fast');
    $('#maincontent').fadeIn('slow');
});

$('#navigation li a').click(function() {
    $('#maincontent').fadeOut('fast');

    $.getScript('js/jquery.contextMenu-1.01.js');
    $.getScript('js/jquery-1.5.1.min.js');
    $.getScript('js/jquery-ui-1.8.12.custom.min.js');
    $.getScript('js/jquery.qtip-2.0.0.min.js');
    $.getScript('js/ajax.js');

    $.ajax({
        method: 'get',
        url: 'load.php',
        data: 'page=' + $(this).attr('rel'),
        beforeSend: function() {
            $('#loading').fadeIn('fast');
        },
        complete: function() {
            $('#loading').fadeOut('fast');
        },
        success: function(html) {
            $('#maincontent').fadeIn('slow');
            $('#maincontent').html(html);
        }
    });
});

$.getScript('js/jquery.contextMenu-1.01.js');
$.getScript('js/jquery-1.5.1.min.js');
$.getScript('js/jquery-ui-1.8.12.custom.min.js');
$.getScript('js/jquery.qtip-2.0.0.min.js');
$.getScript('js/ajax.js');
});

正如您所看到的,我正在尝试首先加载load.php而不使用任何URL参数和来自用户的任何交互.尽管每次都正确加载load.php,但javascript代码却无法说明.有时它可以工作,有时我必须刷新页面几次才能得到一个干净的控制台(没有错误).

控制台中的错误告诉我,在load.php中使用js代码之前,它没有正确加载.如果load.php需要一段时间(使用PHP sleep(5)函数测试),则尤其如此.

如果我需要澄清任何事情,请告诉我:)

Answer 1

如果问题是加载的时间,则应考虑使用具有延迟行为的最新版本的jQuery.

例如,您可以这样做:

    var wait1 = $.getScript('js/jquery.contextMenu-1.01.js');
var wait2 = $.getScript('js/jquery-1.5.1.min.js');
var wait3 = $.getScript('js/jquery-ui-1.8.12.custom.min.js');
var wait4 = $.getScript('js/jquery.qtip-2.0.0.min.js');
var wait5 = $.getScript('js/ajax.js');
$.when(wait1, wait2, wait3, wait4, wait5).then(function() {
    $.ajax({
        method: 'get',
        url: 'load.php',
        data: 'page=' + $(this).attr('rel'),
        beforeSend: function() {
            $('#loading').fadeIn('fast');
        },
        complete: function() {
            $('#loading').fadeOut('fast');
        },
        success: function(html) {
            $('#maincontent').fadeIn('slow');
            $('#maincontent').html(html);
        }
    });
}, function() { handleErrorsFunction()}); 

这将等到所有getScript调用都返回,然后对load.php执行ajax调用(如果上述某个失败,它将触发handleErrorsFunction()).