2

メイン エリアのコンテンツが 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) 関数でテスト)。

何か明確にする必要がある場合はお知らせください:)

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 に答える