PHP Carregamento Ajax (Carregamento Após Javascript)

[Vitor_de_Jesus001]

Resumindo estou criando um sistema usando o laravel, fiz um curso basico na Udemy e o professor focou o curso quase todo em carregamento ajax... So que tem algumas partes que estou com problema: 

 

Exemplo  a parte incial:

 

 

Eu precisava que essas informações fossem exibidas todas na mesma hora... Ou melhor que a pagina so fosse exibida depois que todo conteudo ja estivesse disponivel.. É não tenho a minima ideia de como fazer isso. Requisições ajax podem ser usadas nesse caso? Existe algum outro tipo de Requisição? 

 

Até tentei algumas coisas como: 

 

<div id="hiddenDiv" style="display: none;"> <!-- qualquer coisa aqui --> </div>

 

document.getElementById("hiddenDiv").style.display = "block";

 

 

mas a div aparece dps de uns 3 segundos sem os conteudos totalmente carregados... Então fica a mesma coisa? Alguem pode ajudar?

 

Obrigado!

 

$(document).ready(function($) {


    $.getJSON('/api/pessoas', {}, function(resp) {

        if (resp.total < 10) {
            resp.total = ' ' + resp.total;
        }

        console.log(resp);
        $("#Qpessoas").text(resp.total);

    });

    $.getJSON('/api/familias', {}, function(resp) {

        if (resp.total < 10) {
            resp.total = ' ' + resp.total;
        }

        console.log(resp);
        $("#Qfamilias").text(resp.total);

    });

    $.getJSON('/api/regionais', {}, function(resp) {

        if (resp.total < 10) {
            resp.total = ' ' + resp.total;
        }

        console.log(resp);
        $("#Qregionais").text(resp.total);

    });

    $.getJSON('/api/congregacoes', {}, function(resp) {

        if (resp.total < 10) {
            resp.total = ' ' + resp.total;
        }

        console.log(resp);
        $("#Qcongregacoes").text(resp.total);

    });

    $.getJSON('/api/users', {}, function(resp) {

        if (resp.total < 10) {
            resp.total = ' ' + resp.total;
        }

        console.log(resp);
        $("#Qusuarios").text(resp.total);

    });

});

 

[Leandro Diógenes]

@Vitor_de_Jesus001 Não consegui entender muito bem.
Pelo que entendi você quer ocultar alguns elementos e voltar a mostrar eles somente quando TODAS as requests AJAX concluírem.
Não recomendo muito essa abordagem pois uma das requests pode falhar e você teria que pensar como tratar esse problema.

Recomendo mostrar a página/componente com um indicador de que ele está sendo carregado.

Você pode usar um spinner (icone de loading) dentro do componente.

Quando a request terminar você retira o spinner e preenche o conteúdo de fato.