Cargar scripts bajo demanda con JQuery

Quien no se ha encontrado alguna vez que se va añadiendo potencia y dinamismo a las páginas web con diferentes librerías y al final tenemos una página que carga un montón de ficheros que a veces no se utilizan porque el usuario no ha necesitado esa opción en ese momento en concreto. Y con la aparición hace tiempo de los MastersPages se ha aumentado esta práctica tanto si hablamos de webForms como con MVC. Pues gracias a JQuery podemos cargar las dependencias o ficheros .js que necesitemos solo cuando realmente se necesite esa funcionalidad de una forma dinámica y no tener que descargar todo al cargar la página. Solo tendremos que utilizar getScript para cargar un script remoto con una llamada asíncrona “AJAX” y además no tendremos problemas con cross-domain, porque utiliza JsonP para cargar el script entre dominios. Pero que mejor que un ejemplo para que quede claro el concepto.

Ejemplo:

Imaginaros que tenemos una aplicación con una búsqueda avanzada oculta que utiliza JQuery, un autocomplete y un watermark.

  • El botón para mostrar el formulario.

  • Se muestra el contenido del formulario al hacer click en el botón

  • El autocomplete está disponible


Lo normal sería cargar todos los scripts que necesitamos al cargar la página.

<script type=”text/javascript” src=”Scripts/jquery-1.4.1.min.js”></script> <script type=”text/javascript” src=”Scripts/jquery.watermark.min.js”></script><script type=”text/javascript” src=”Scripts/JScript.js”></script>


Pero sería mucho más optimo cargar las librerías del watermark y el autocomplete solo cuando se muestra el formulario de búsqueda avanzada. ¿ NO ?

Pues para cargar los script bajo demanda sería:

$(‘#btnBusqueda’).click(function () { $.getScript(“Scripts/jquery-autocomplete.js”, function (data, estado) { if (estado == ‘success’) { $(“#tags”).autocomplete({ source: availableTags }); } else{ alert(“Error al cargar la librería autocomplete”); } }); $.getScript(“Scripts/jquery.watermark.min.js”, function (data, estado) { if (estado == ‘success’) { $(‘#tags’).watermark(‘Buscar…’); } else{ alert(“Error al cargar la librería watermark”); } }); $(‘.busquedaAvanzada’).show(); });


Como se puede comprobar solo se cargan las librerías si el usuario hace click en el botón para ver el formulario de búsqueda, entonces se carga el script y se utiliza una función anónima la cual utiliza dos parámetors con el contenido del script y el estado de la solicitud.

Posibles estados:

  • “timeout”
  • “error”
  • “notmodified”
  • “success”
  • “parsererror”

Con este sencillo ejemplo podemos ver cómo podemos cargar scripts bajo demanda.

2 comentarios en “Cargar scripts bajo demanda con JQuery”

  1. También hay que considerar el tiempo de carga del javascript que no sea excesivo, el retardo puede afectar al a percepción del usuario.

    ¿Se podría combiar carga bajo demanda y el típico “Cargando…” con progreso, todo ello con JQuery ?

    saludos

Deja un comentario

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