¿Cómo hacer el código jquery DESPUÉS de cargar la página?

85

Si desea que un evento funcione en su página, debe llamarlo dentro de la función $ (document) .ready (). Todo lo que contiene se cargará tan pronto como se cargue el DOM y antes de que se carguen los contenidos de la página.

Quiero hacer código javascript solo después de que se carguen los contenidos de la página, ¿cómo puedo hacerlo?

Alex
fuente

Respuestas:

168

Usar en loadlugar de ready:

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

Actualización Necesita usar .on()desde jQuery 1.8. ( http://api.jquery.com/on/ )

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

De esta respuesta :

Según http://blog.jquery.com/2016/06/09/jquery-3-0-final-released/ :

Se eliminaron los alias de eventos obsoletos

.load, .unloady .error, en desuso desde jQuery 1.8, ya no existen. Úselo .on()para registrar oyentes.

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

Mate
fuente
1
Del comentario sobre esta respuesta: stackoverflow.com/a/37817516/957246 $ (window) .on ("load", function () {// code here}); ..porque ".load" está obsoleto.
trapper_hag
usando .on () es tan obvio ... pero pasé 1h golpeándome la cabeza contra la pared antes de encontrar esto ... ¡gracias ...!
ghuroo
2
Cuidado con el error de tratar de $(document).on('load', ...lo que debe ser$(window).on('load',...
Usuario
29

Siguiendo

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

puede ser reemplazado

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

Una vez más, estoy usando una forma de aumentar el tiempo de carga de la 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
fuente
2
¿un manipulador de carga en el manipulador listo? Eso es una locura No necesita que el documento esté listo ya que la ventana existe en ese punto y puede adjuntar un controlador sin él.
dalore
18

nadie mencionó esto

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

que es una función abreviada de

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

Editar: este código esperará hasta que todo el contenido (imágenes y scripts) esté completamente cargado y renderizado en el navegador.

Tuve este problema en el $(window).on('load',function(){ ... })que dispararía demasiado rápido para mi código, ya que el Javascript que usé fue para formatear y ocultar elementos. Los elementos se ocultaron demasiado pronto y se dejaron con una altura de 0.

Ahora lo uso $(window).on('pageshow',function(){ //code here });y se dispara en el momento que necesito.

Boyd Cyr
fuente
1
Este también me ayudó, exactamente quería ejecutar un código después de que se mostrara la página de jQuery Mobile. Gracias. @Boyd Cyr
codedudey
Solo quería agregar cuánto más útil es este código en comparación con la respuesta aceptada. Muchas gracias.
Countzero
10

Puede evitar quedar indefinido en '$' de esta manera

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

EDITAR: Usar 'DOMContentLoaded' es más rápido que solo 'cargar' porque la página de espera de carga está completamente cargada, imágenes incluidas ... mientras que DomContentLoaded espera solo la estructura

Diego Vinícius
fuente
8

Estoy buscando el mismo problema y esto es lo que me ayuda. Aquí está la versión 3.1.0 de jQuery y el evento de carga está obsoleto para su uso desde la versión 1.8 de jQuery . El evento de carga se elimina de jQuery 3.0. En su lugar, puede usar el método on y vincular el evento de carga de JavaScript:

$(window).on('load', function () {
  alert("Window Loaded");
});
ankit suthar
fuente
5

escribe el código que quieres que se ejecute dentro de este. Cuando su documento esté listo, esto se ejecutará.

$(document).ready(function() { 

});
Marc-André Denault
fuente