Como fazer o código jquery APÓS o carregamento da página?

88

Se você quiser que um evento funcione em sua página, você deve chamá-lo dentro da função $ (document) .ready (). Tudo dentro dele será carregado assim que o DOM for carregado e antes que o conteúdo da página seja carregado.

Eu quero fazer código javascript somente depois que o conteúdo da página for carregado, como posso fazer isso?

Alex
fonte

Respostas:

174

Use em loadvez de ready:

$(document).load(function () {
 // code here
});

Atualização que você precisa usar .on()desde o jQuery 1.8. ( http://api.jquery.com/on/ )

$(window).on('load', function() {
 // code here
});

Desde esta resposta :

De acordo com http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ :

Aliases de eventos obsoletos removidos

.load, .unloadE .error, obsoleto desde o jQuery 1.8, não existem mais. Use .on()para registrar ouvintes.

https://github.com/jquery/jquery/issues/2286

Matt
fonte
1
Com base no comentário sobre esta resposta: stackoverflow.com/a/37817516/957246 $ (window) .on ("load", function () {// codifique aqui}); ..porque ".load" está obsoleto.
trapper_hag
usando .on () é tão óbvio .. mas eu passei 1h batendo minha cabeça contra a parede antes de achar isso .. obrigado ..!
ghuroo de
3
Cuidado com o erro de tentar $(document).on('load', ...que precisa ser$(window).on('load',...
Usuário
29

Segue

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

pode ser substituído

$(window).bind("load", function() { 
     // insert your code here 
});

Existe mais uma forma que estou usando para aumentar o tempo de carregamento da página.

$(document).ready(function() { 
  $(window).load(function() { 
     //insert all your ajax callback code here. 
     //Which will run only after page is fully loaded in background.
  });
});
Kshitiz
fonte
2
um manipulador de carga no manipulador pronto? Isso é loucura. Você não precisa do documento pronto, pois a janela existe nesse ponto e você pode anexar um manipulador sem ele.
dalore
20

ninguém mencionou isso

$(function() {
    // place your code
});

que é uma função abreviada de

$(document).ready(function() { .. });
Zoltán Süle
fonte
16

Editar: Este código irá esperar até que todo o conteúdo (imagens e scripts) seja totalmente carregado e renderizado no navegador.

Eu tive este problema onde $(window).on('load',function(){ ... })dispararia muito rápido para o meu código, uma vez que o Javascript que usei era para fins de formatação e ocultar elementos. Os elementos foram ocultados muito cedo e foram deixados com uma altura de 0.

Eu agora uso $(window).on('pageshow',function(){ //code here });e ele dispara na hora que preciso.

Boyd Cyr
fonte
1
Este também me ajudou, eu queria exatamente executar algum código depois que a página do jQuery Mobile fosse exibida. Obrigado. @Boyd Cyr
codedudey
Só queria acrescentar o quanto esse código é mais útil em comparação com a resposta aceita. Muito obrigado.
Countzero
10

Você pode evitar ficar indefinido em '$' desta forma

window.addEventListener("DOMContentLoaded", function(){
    // Your code
});

EDIT: Usar 'DOMContentLoaded' é mais rápido do que apenas 'carregar' porque a página de espera de carga está totalmente carregada, imgs incluídos ... enquanto DomContentLoaded espera apenas a estrutura

Diego vinícius
fonte
8

Estou procurando o mesmo problema e aqui está o que me ajuda. Aqui está o jQuery versão 3.1.0 e o evento de carregamento está obsoleto para uso desde o jQuery versão 1.8 . O evento de carregamento é removido do jQuery 3.0. Em vez disso, você pode usar o método on e vincular o evento de carregamento do JavaScript:

$(window).on('load', function () {
  alert("Window Loaded");
});
Ankit Suthar
fonte
5

escreva o código que deseja executar dentro dele. Quando seu documento estiver pronto, ele será executado.

$(document).ready(function() { 

});
Marc-André Denault
fonte