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代码却无法说明。有时它可以工作，有时我必须刷新页面几次才能获得一个干净的控制台（没有错误）。

控制台中的错误告诉我js代码在load.php中使用之前没有正确加载。如果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（））。

Answer 2

您不应该使用getScript真正加载所有这些脚本。你每次都需要一些（或全部？），所以为什么不把它们包含在页面上。另外，既然你使用jquery加载jquery，我会说你已经把它包含在页面上了。所以不要再尝试加载它。

jQuery Ajax加载和getScript

2 个答案: