2

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

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

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

脚本.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');
});

如您所见，我尝试在没有任何 URL 参数和来自用户的任何交互的情况下首先加载 load.php。尽管 load.php 每次都正确加载，但对于 javascript 代码却不能这么说。有时它可以工作，有时我必须刷新页面几次才能获得干净的控制台（没有错误）。

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

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

4

2 回答 2

5

如果问题是加载的时间问题，您应该考虑使用具有延迟行为的最新版本的 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()）。

于 2011-04-30T03:37:03.293 回答
3

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

于 2011-04-30T03:29:00.197 回答