Atrasando um script jquery até que todo o resto seja carregado

112

Eu tenho um script jquery que preciso executar apenas depois que tudo o mais na página, incluindo alguns outros javascripts (sobre os quais não tenho controle) terminaram de fazer seu trabalho.

Achei que talvez houvesse uma alternativa para $ (document). Já, mas não consegui encontrá-la.

javascript jquery dom crisma
fonte

Respostas:

217

Você pode ter $(document).ready()várias vezes em uma página. O código é executado na sequência em que aparece.

Você pode usar o $(window).load()evento para o seu código, pois isso acontece depois que a página está totalmente carregada e todo o código nos vários $(document).ready()manipuladores terminou de ser executado.

$(window).load(function(){
  //your code here
});
Jose Basilio
fonte
1
posso importar scripts externos usando este método?
crisma de
1
Claro, se você já está fazendo isso dentro de $ (document) .ready (), não será diferente.
José Basilio
7
Essa resposta foi útil para mim porque não percebi que o código jquery é executado em sequência
Sevenearths
1
Muito obrigado! Isso corrigiu meu problema .height () em que não estava obtendo a altura correta porque a página (aparentemente) ainda não estava carregada.
Jon
6
No JQuery 3.0, você deve usar a sintaxe $(window).on('load', function() { });porque $ (window) .load () está obsoleto.
Alex H
13

Este bloco de código resolve meu problema,

<script type="text/javascript">
  $(window).bind("load", function () {
    // Code here
  });
</script>
Expandir trecho

Agah Toruk
fonte
Como você pode executar uma função jQuery para ver se jQuery já está carregado? Isso funcionará apenas quando o jQuery for carregado antes da verificação.
HelpNeeder
11

Vários $(document).ready()serão disparados em ordem de cima para baixo na página. O último $(document).ready()será disparado por último na página. Dentro do último $(document).ready(), você pode acionar um novo evento personalizado para disparar após todos os outros.

Envolva seu código em um manipulador de eventos para o novo evento personalizado.

<html>
<head>
<script>
    $(document).on("my-event-afterLastDocumentReady", function () {
        // Fires LAST
    });
    $(document).ready(function() {
        // Fires FIRST
    });
    $(document).ready(function() {
        // Fires SECOND
    });
    $(document).ready(function() {
        // Fires THIRD
    });
</script>
<body>
... other code, scripts, etc....
</body>
</html>

<script>
    $(document).ready(function() {
        // Fires FOURTH
        // This event will fire after all the other $(document).ready() functions have completed.
        // Usefull when your script is at the top of the page, but you need it run last
        $(document).trigger("my-event-afterLastDocumentReady");
    });
</script>
Jason Williams
fonte
3

A partir daqui :

// Add jQuery 
var GM_JQ = document.createElement('script'); 
GM_JQ.src = 'http://jquery.com/src/jquery-latest.js';
GM_JQ.type = 'text/javascript'; 
document.getElementsByTagName('head')[0].appendChild(GM_JQ); 

// Check if jQuery's loaded 
function GM_wait() 
{ 
    if(typeof unsafeWindow.jQuery == 'undefined') 
    { 
        window.setTimeout(GM_wait,100); 
    } 
    else 
    { 
        $ = unsafeWindow.jQuery; 
        letsJQuery(); 
    } 
} 

GM_wait(); 

// All your GM code must be inside this function 
function letsJQuery() 
{
    // Do your jQuery stuff in here    
}

Isso irá esperar até que o jQuery seja carregado para usá-lo, mas você pode usar o mesmo conceito, definindo variáveis ​​em seus outros scripts (ou verificando-as se não forem o seu script) para esperar até que sejam carregadas para usá-las.

Por exemplo, em meu site, eu uso isso para carregamento de JS assíncrono e esperando até que eles terminem antes de fazer qualquer coisa com eles usando jQuery:

<script type="text/javascript" language="JavaScript"> 
    function js(url){
        s = document.createElement("script");
        s.type = "text/javascript";
        s.src = url;
        document.getElementsByTagName("head")[0].appendChild(s);
    }       

    js("/js/jquery-ui.js");
    js("/js/jrails.js");
    js("/js/jquery.jgrowl-min.js");
    js("/js/jquery.scrollTo-min.js");
    js("/js/jquery.corner-min.js");
    js("/js/jquery.cookie-min.js");
    js("/js/application-min.js");

    function JS_wait() {
        if (typeof $.cookie == 'undefined' || // set in jquery.cookie-min.js
            typeof getLastViewedAnchor == 'undefined' || // set in application-min.js
            typeof getLastViewedArchive == 'undefined' || // set in application-min.js 
            typeof getAntiSpamValue == 'undefined') // set in application-min.js
        { 
            window.setTimeout(JS_wait, 100); 
        }
        else 
        { 
            JS_ready(); 
        }
    }

    function JS_ready() {
        // snipped
    };

    $(document).ready(JS_wait);
</script>
Chris Doggett
fonte
Isso só vai esperar até que o jQuery seja carregado e desconsiderar outros aspectos da página. Não é nada mais do que um hack para versões antigas do greasemonkey que não suportam a diretiva @require.
Cheekysoft
1
Eu adicionei meu código como um exemplo de como usei o mesmo conceito com jQuery para esperar até que outro código seja carregado.
Chris Doggett
1

Acontece que, devido a uma mistura peculiar de estruturas javascript, eu precisei iniciar o script usando um ouvinte de eventos fornecido por uma das outras estruturas.

crisma
fonte
3
Feliz por você ter encontrado uma solução, mas sua resposta não é útil para os outros sem mais detalhes ...
Andrew
1

Você tentou carregar todas as funções de inicialização usando o $().ready, executando a função jQuery que você queria por último?

Talvez você possa usar setTimeout()na $().readyfunção que deseja executar, chamando a funcionalidade que deseja carregar.

Ou use setInterval()e faça com que o intervalo verifique se todas as outras funções de carregamento foram concluídas (armazene o status em uma variável booleana). Quando as condições forem atendidas, você pode cancelar o intervalo e executar a função de carregamento.

Richard Clayton
fonte
Não tenho certeza do que você quer dizer com isso. Você está sugerindo que eu importe todos os scripts por meio de um script jquery e apenas coloque meu script por último? Em caso afirmativo, como seria (eu sou um designer por profissão, então não use palavrões :))
crisma
$ (documento) .ready (function () {callLoadFunction1 (); callLoadFunction2 (); calljQueryLoadFunction ();});
Richard Clayton
os outros scripts são todos arquivos externos, então não tenho certeza se isso funcionaria, certo?
crisma de
@chrism: Veja meu segundo exemplo. Ele espera até que as variáveis ​​sejam definidas indicando que os outros arquivos JS externos foram carregados antes de fazer qualquer coisa. Você acabou de colocar o código que deseja executar por último no meu método JS_ready (). Ele faz exatamente o que você está procurando.
Chris Doggett
2
Basta usar$(window).load(function(){...})
Ryan Taylor