Carga Dinámica de archivos Javascript como facebook

js

 

Al programador front-end (encargado de la interfaz) de una página web profesional desde el momento que carga archivos css, javascripts o hasta imágenes, suele preocuparse por el tiempo de carga de la página web. Por eso te traigo un tip que encontré, usado por facebook para reducir el tiempo de carga de los archivos js.

Aclaro que lo ideal para una página o aplicación común es usar algo como Google JS Loader:

Screenshot_1

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:Screenshot_3
  • 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. Screenshot_4
  • Luego cargar el loadJS.js a la etiqueta HEAD de la página:Screenshot_2

 

  • 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


Este tip lo encontré y lo modifiqué un poco, si desean ver el original:

http://pensandoencodigo.blogspot.com/2012/01/inclusion-y-carga-dinamica-de-archivos.html

3 Comentarios
  1. Miguel 2 años

    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.

    • Imagen de perfil de Andrés Sp Autor
      Andrés Sp 2 años

      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.

  2. link 1 año

    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.

Contesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

©2017 Codictados Comunidad libre para el aprendizaje de codigo Online

o

Inicia Sesión con tu Usuario y Contraseña

o    

¿Olvidó sus datos?