origen - ejecutar javascript despues de cargar pagina
Retrasando un script jquery hasta que todo lo demás se haya cargado (6)
¿Has intentado cargar todas las funciones de inicialización usando $().ready
, ejecutando la función jQuery que querías al final?
Quizás pueda usar setTimeout()
en la función $().ready
que desea ejecutar, llamando a la funcionalidad que desea cargar.
O bien, use setInterval()
y setInterval()
que la comprobación de intervalos verifique si todas las otras funciones de carga se han completado (almacene el estado en una variable booleana). Cuando se cumplen las condiciones, puede cancelar el intervalo y ejecutar la función de carga.
Tengo un script de jquery que necesito ejecutar solo una vez que todo lo demás en la página, incluidos algunos javascripts (sobre los cuales no tengo control) han terminado de hacer lo suyo.
Pensé que tal vez había una alternativa a $ (documento). Preparado, pero no he podido encontrarlo.
Desde here :
// 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
}
Esto esperará hasta que se cargue jQuery para usarlo, pero puede usar el mismo concepto, establecer variables en sus otros scripts (o revisarlos si no son su script) para esperar hasta que se carguen para usarlos.
Por ejemplo, en mi sitio, uso esto para la carga asincrónica de JS y espero hasta que hayan terminado antes de hacer algo con ellos 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>
Este bloque de código resuelve mi problema,
<script type="text/javascript">
$(window).bind("load", function () {
// Code here
});
</script>
Resulta que debido a una mezcla peculiar de frameworks javascript que necesitaba para iniciar el script usando un detector de eventos proveído por uno de los otros frameworks.
Varios $(document).ready()
activarán en orden descendente en la página. Los últimos $(document).ready()
activarán por última vez en la página. Dentro de los últimos $(document).ready()
, puede activar un nuevo evento personalizado para que se active después de todos los demás.
Envuelva su código en un controlador de eventos para el nuevo 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>
Puede tener $(document).ready()
varias veces en una página. El código se ejecuta en la secuencia en la que aparece.
Puede usar el evento $(window).load()
para su código, ya que esto sucede después de que la página está completamente cargada y todo el código en los distintos manejadores $(document).ready()
haya terminado de ejecutarse.
$(window).load(function(){
//your code here
});