¿Cargar scripts después de cargar la página?

¿Es posible cargar ciertas secuencias de comandos como¿Cargar scripts después de cargar la página?

<script type="text/javascript" src="somescript.js"></script>

cuando el resto de la página se ha cargado?

Imagine que tengo unos pocos archivos de script más grandes como este que no son necesarios cuando se carga la página. P.ej. 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?

Fuente

2011-03-30 matt

si se enumeran en la cabecera, pero si utilizas algo como yepnope {http://yepnopejs.com/}, puedes cargarlos solo cuando los necesites. – idbentley

En jQuery usted podría do this el documento listo

$.getScript("somescript.js", function(){ 
    alert("Script loaded and executed."); 
});

Fuente

2011-03-30 19:11:38 slandau

¡He aprendido una función útil! – Miron

utilizar el método getScript de jQuery! o simplemente intenta poner esta secuencia de comandos al final de la página?

Fuente

2011-03-30 19:11:40

Sí, esto es posible al inyectar dinámicamente los archivos JavaScript desde el código. Hay muchas bibliotecas que puede usar: RequireJS, HeadJS etc. Recientemente encontré el documento this que compara muchas bibliotecas de cargadores de JavaScript.

Fuente

2011-03-30 19:15:03

Sí, eso es completamente posible. Agregue un evento onLoad="foo();" a su etiqueta <body> y haga 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>

Fuente

2011-03-30 19:16:00

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. 
}

Este utiliza una función de devolución de llamada que se ejecutará cuando el guión se ha cargado.

Fuente

2011-03-30 19:22:46 smfoote

Maps does: https://developers.google.com/loader/ –

¿Nadie ha mencionado esto?

$(window).load(function(){ 
    // do something 
});

$(window).bind("load", function() { 
    // do something 
});

Fuente

2014-01-29 10:49:27 laike9m

simplemente puede agregar en ese archivo de script defer parámetro

<script src="pathToJs" defer></script>

puede comprobar this cuestión, así

Fuente

2015-08-11 22:40:46 nikoss

No, esto es incorrecto.El parámetro 'async' especifica que el script se ejecuta cuando está listo, independientemente de qué tan cargada esté la página. 'defer' es probablemente lo que estás buscando. –

gracias por corregir @AlexHolsgrove – nikoss

$(document).ready(function() { 
    var ss = document.createElement("script"); 
    ss.src = "somescript.js"; 
    ss.type = "text/javascript"; 
    document.getElementsByTagName("head")[0].appendChild(ss); 
});

Fuente

2016-07-05 04:20:22

Bienvenido a SO :) Siempre es mejor agregar una explicación al código que está publicando como respuesta, para que ayude a los visitantes a entender por qué esta es una buena respuesta. – abarisone

-1

a poco permite la página para mostrar antes de cargar la secuencia de comandos, utilice el atributo async:

<script src="//url/to/script.js" async></script>

Para ocultar la ruleta de carga en el navegador, añada la etiqueta de script después de la carga de la página final:

<script> 
document.addEventListener('DOMContentLoaded', function() { 
    var script = document.createElement('script'); 
    script.src = '//url/to/script.js'; 
    document.getElementsByTagName('body')[0].appendChild(script); 
}); 
</script>

Fuente

2018-01-28 12:08:36 danijar

¿Cargar scripts después de cargar la página?

Respuesta

Cuestiones relacionadas