Evento de desencadenante en la carga del cuerpo completo js/jquery

Question

Deseo desencadenar un evento en la carga de la página completa utilizando javascript/jquery.

¿Hay alguna manera de desencadenar un evento o llamar a una función simple una vez que la carga de la página se complete por completo?

Por favor sugiera gente si tiene alguna referencia.

Answer 1

Todo el mundo ha mencionado la función ready (y sus accesos directos), pero incluso antes de eso, sólo puede poner el código en una etiqueta script justo antes de la etiqueta de cierre body (esto es lo que la gente cierre Yui y Google recomiendan), así:

<script type='text/javascript'> 
pageLoad(); 
</script> 
</body> 

En este punto, todo lo que está encima de esa etiqueta de secuencia de comandos está disponible en el DOM.

por lo que sus opciones en orden de aparición:

1. Apertura: llamada a la función en script etiqueta justo antes de cerrar la etiqueta body. El DOM está listo en este momento (según la gente de Google Closure, y deberían saberlo, también lo he probado en varios navegadores).

2. Earlyish: la devolución de llamada jQuery.ready (y sus formas de acceso directo).

3. tarde, después de todos elementos de la página, incluyendo imágenes están a plena carga: windowonload evento.

Aquí está un ejemplo vivo: http://jsbin.com/icazi4, extracto pertinente:

</body> 
<script type='text/javascript'> 
    runPage(); 

    jQuery(function() { 
    display("From <tt>jQuery.ready</tt> callback."); 
    }); 

    $(window).load(function() { 
    display("From <tt>window.onload</tt> callback."); 
    }); 

    function runPage() { 
    display("From function call at end of <tt>body</tt> tag."); 
    } 

    function display(msg) { 
    var p = document.createElement('p'); 
    p.innerHTML = msg; 
    document.body.appendChild(p); 
    } 
</script> 

(Sí, podría haber utilizado jQuery para la función display, pero estaba comenzando con una plantilla no jQuery.)

Answer 2

Cuando la página se carga totalmente (DOM, imágenes, ...)

$(window).load(function(){ 
    // full load 
}); 

Cuando DOM carga de elementos (no es necesario todas las imágenes se cargará)

$(function(){ 
    // DOM Ready 
}); 

entonces se puede activar cualquier evento

$("element").trigger("event"); 

Answer 3

$(document).ready(function() { 
    // do needed things 
}); 

Esto se activará una vez que la estructura DOM esté lista.

Answer 4

jQuery:

$(function(){ 
    // your code...this will run when DOM is ready 
}); 

Si desea ejecutar su código después de que todos los recursos página incluyendo las imágenes/cuadros/DOM han cargado, es necesario utilizar load evento:

$(window).load(function(){ 
    // your code... 
}); 

JavaScript:

window.onload = function(){ 
    // your code... 
}; 

Answer 5

no

$(document).ready(function() { 

    }); 

es lo que está buscando?

Answer 6

$(document).ready(function() { YOUR CODE HERE }) 

Answer 7

La función windows.load es útil si desea hacer algo cuando todo está cargado.

$(window).load(function(){ 
    // full load 
}); 

Pero también puede usar la función .load en cualquier otro elemento. Así que si usted tiene una imagen particularmente grande y quiere hacer algo al que se carga, pero el resto de su código de carga de la página cuando el DOM ha cargado que podría hacer:

$(function(){ 
    // Dom loaded code 

    $('#largeImage').load({ 
     // Image loaded code 
    }); 
}); 

También la función jQuery .load es más o menos lo mismo que una descarga normal.

Answer 8

También puede use el atributo defer en la etiqueta script. Siempre y cuando no especifique async que, por supuesto, no será útil para su objetivo.

Ejemplo:

<script src="//other-domain.com/script.js" defer></script> 
<script src="myscript.js" defer></script> 

Como described here:

En el ejemplo anterior, el navegador descarga ambas secuencias de comandos en paralelo y les ejecutar sólo los incendios antes de DOMContentLoaded, que mantienen su orden.

[...] guiones diferidos deben ejecutar después de que el documento había analizado, en el orden en que se agregaron [...]

discusiones

Stackoverflow relacionadas: How exactly does <script defer=“defer”> work?

Answer 9

Para ello, será función cuando la estructura DOM está listo

$(document).ready(function() { 
     userCommission(); 
     //Show commision box 
     $('#userroles').change(function(){ 
      userCommission(); 
     }); 

     function userCommission() { 
      var roles = $('#userroles').val(); 
      var result = roles.map(function (x) { 
       return parseInt(x, 10); 
      }); 
      var i = result.indexOf(6);   
      console.log(i); 
      if(i == -1) { 
       console.log('inside'); 
       $('.user-commission :input').attr("disabled", true);; 
       $('#user-commission').hide(); 
      } 
     } });