Pero volviendo al tema: ¿Qué pasa si tengo muchos JS por cargar?
Les explicaré como yo lo comprendí y los cambios que realicé desde la fuente original. Solución:
- Se debe crear un loadJS.js con la siguiente función y lo que se desea cargar:
- Si cargamos asincrónicamente, hay que tomar en cuenta que al utilizar funciones que dependan de una librería en específico fallarían al no encontrar las definiciones de las funciones que se desean utilizar, ya que pueden haberse cargado o no.
- En la imagen de ejemplo hay urls terminados en «jquery-2.1.1.min.js» y otro «funciones.js», estos son primordiales si se desea ejecutar una sentencia en el evento onLoad de la página y como trabaja con jquery debe ser cargado después de él.
- Si notan, el fnAfterLoad es el que está al final de «funciones.js» eso significa que si hay algo que se deba ejecutar dentro, se ejecutará después de que se carga la página.
Código Base
1 2 3 4 5 6 7 8 9 10 11 12 |
//loadJS('jquery', 'url...jquery.js', false); //loadJS('funciones', 'url...funciones.js', false); function loadJS(id, src, async) { if (document.getElementById(id) != null) return; var js = document.createElement('script'); js.id = id; js.src = src; js.async = async; document.getElementsByTagName('head')[0].appendChild(js); } |
1 2 3 4 5 6 7 8 9 10 |
<!--Cargado de Javascript--> <!--script src='url...loadJS.js' type='text/javascript'></script>--> <script type='text/javascript'> var fnAfterLoad = function() { // realizar x,y,z procedimientos aqui // Se pueden llamar las funciones de los archivos cargados con loadJS // Además del mismo loadJS, si se debe cargar algo en particular } </script> |
1 2 3 4 5 6 7 8 9 10 11 12 |
// jQuery onReady $(function() { fnOnReady();}); /** funcion onLoad */ var fnOnReady = function() { // ejecución de funciones globales // variables globales, etc, etc. // chequeamos si existe una función fnAfterLoad // para ejecutarla if (window.fnAfterLoad) window.fnAfterLoad(); } |
Hola codictados.com
No en tiendo como insertar ese código…. nos explicas como sirve pero para insertarlo todo de una ves osea el código completo y su inserción .
Gracias por el tutorial.
Hola Miguel, donde dice Código Base está el código para implementarlo, algunas partes están en comentarios porque se usan dependiendo de las necesidades.
loadJS.js (el primer cuadrante) y funciones.js (el tercer cuadrante) son los archivos que debes agregar al head como comúnmente se cargan .js a una página. El ejemplo es Página.html (segundo cuadrante) donde dice:
Cargado de Javascript
script src=’url…loadJS.js’ type=’text/javascript’>
Aquí cargo el loadJS pero dependerá del url que vayas a usar. Además en las imágenes uso como ejemplo una página creada por mí, puedes guiarte de ahí.
Espero haber resuelto tu duda, cualquier otra duda nos comentas.
Recordar de nuevo que en caso de probar cualquiera de estos plugins o modificaciones en el codigo tendremos que hacer pruebas en el frontal de la web para verificar que todo sigue funcionando como debiera. En caso de que surjan problema es preferible no aplazar la carga de Javascript y CSS.