origen - ejecutar javascript despues de cargar pagina
Cargue scripts después de que la página se haya cargado? (9)
En JQuery puedes hacer esto en un documento listo
$.getScript("somescript.js", function(){
alert("Script loaded and executed.");
});
¿Es posible cargar ciertos scripts como
<script type="text/javascript" src="somescript.js"></script>
cuando el resto de la página se ha cargado?
Imagine que tengo algunos archivos de script más grandes como este que no son necesarios cuando la página está cargada. Por ejemplo, estoy usando la API de Google Maps que solo se utiliza cuando se hace clic en un botón (por lo que no se carga la página).
¿Es posible cargar el resto de la página primero, antes de procesar todas esas etiquetas de script en mi cabeza?
Es posible. Estaba haciendo algo similar en un sitio intensivo de AJAX, pero estaba cargando la API de Google Charts. Aquí está el código que utilicé para cargar la API de Google Charts cuando se hizo clic en un botón en la página.
function loadGoogleChartsAPI() {
var script = document.createElement("script");
// This script has a callback function that will run when the script has
// finished loading.
script.src = "http://www.google.com/jsapi?callback=loadGraphs";
script.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(script);
}
function loadGraphs() {
// Add callback function here.
}
Esto utiliza una función de devolución de llamada que se ejecutará cuando el script se haya cargado.
Nadie mencionó esto?
$(window).load(function(){
// do something
});
o
$(window).bind("load", function() {
// do something
});
Para permitir que la página se muestre antes de que se cargue el script, use el atributo async :
<script src="//url/to/script.js" async></script>
Para ocultar el spinner de carga en el navegador, añada la etiqueta del script una vez que la página haya terminado de cargarse:
<script>
document.addEventListener(''DOMContentLoaded'', function() {
var script = document.createElement(''script'');
script.src = ''//url/to/script.js'';
document.getElementsByTagName(''body'')[0].appendChild(script);
});
</script>
Sí, eso es completamente posible. Agregue un onLoad="foo();" evento a su etiqueta <body> y hacer que invoque sus scripts. Tendrá que ajustar su JS externo en una función y hacer algo como:
//EXTERNAL JS (jsstuff.js)
function Mojo() {
document.getElementById(''snacks'').style.visibility = "visible";
alert("we are victorious!");
}
//YOUR HTML
<html>
<head>
<script type=''text/javascript''></script>
</head>
<body onLoad=''Mojo();''>
<div id=''snacks''>
<img src=''bigdarnimage.png''>
</div>
</body>
</html>
simplemente puede agregar al parámetro de defer archivo de script
<script src="pathToJs" defer></script>
puedes verificar this pregunta también
utiliza el método getScript de jquery! o simplemente intenta poner esta secuencia de comandos al final de la página?
$(document).ready(function() {
var ss = document.createElement("script");
ss.src = "somescript.js";
ss.type = "text/javascript";
document.getElementsByTagName("head")[0].appendChild(ss);
});