jQuery Ajax load e getScript

Question

Estou tentando configurar meu site para que o conteúdo da área principal seja carregado via javascript (algumas páginas demoram um pouco para serem renderizadas). No entanto, encontrei um problema lógico ao usar jQuery.load (), jQuery.getScript e jQuery.ajax ().

Preciso carregar determinados arquivos javascript via getScript para poder usar essas funções etc. dentro do conteúdo carregado.

• index.php - O arquivo principal sendo exibido (também contém #loading)
• js / script.js - O arquivo que contém o código de carregamento
• js / *. js - Vários arquivos javascript que preciso poder usar dentro do #maincontent após o carregamento
• load.php - O arquivo sendo carregado em #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');
});

Como você pode ver, estou tentando carregar load.php primeiro sem nenhum parâmetro de URL e nenhuma interação do usuário. Embora load.php seja carregado corretamente todas as vezes, o mesmo não pode ser dito para o código javascript. Às vezes funciona, outras vezes, preciso atualizar a página algumas vezes antes de obter um console limpo (sem erros).

Os erros no console sugerem que o código js não foi carregado corretamente antes de ser usado dentro de load.php. Isso é especialmente verdadeiro se load.php demorar (testado com a função sleep (5) do PHP).

Avise-me se precisar de esclarecer alguma coisa :)

Answer 1

Você não deve carregar todos esses scripts com getScript.Você precisará de alguns (ou todos?) Deles todas as vezes, então por que não apenas incluí-los na página.Além disso, como você está usando o jquery para carregar o jquery, vou dizer que você já o incluiu na página.Portanto, não tente carregá-lo novamente.

Answer 2

Se o problema for o tempo dos carregamentos, você deve considerar o uso da versão mais recente do jQuery com comportamento adiado.

Você poderia, por exemplo, fazer:

    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()}); 

Isso irá esperar até que todas as chamadas getScript retornem e, em seguida, fazer a chamada ajax para load.php (ou irá disparar o handleErrorsFunction () se um dos itens acima falhar).