Jquery Plugins - Como evitar con getScript tiempos de carga excesivos

Introducción

jQuery es genial. Pero lo mejor es que podes usar toneladas de plugins para cada funcionalidad web 2.0 que quieras dar. Y sobre todo podes implementarlo de forma rápida sin perder un par de meses programando en javascript y todas las complicaciones que eso significa — Inclusive usando jquery –.

Pero después aparece el problema: Quieres el plugin autocomplete para algunos formularios, el plugin blockUI para las esperas en los pedidos de ajax, quieres ClueTip para unos heremosos web 2.0 mensajes de ayuda a tus usuarios, y como si todo esto no fuera suficiente, necesitas cargar un archivo de 4k de javascript con todo el código que escribiste para cargar y mostrar todas estas alucinantes funcionalidades.

Entonces lo haces, tu sitio literalmente la detona y sos el uno haciendo sitios web 2.0. ¿No? Pero ahi te entran a llegar las puteadas y los insultos porque algunas personas necesitan 30 segundos para recién poder cargar tu página y como si esto no fuese suficiente, también te dicen que para poder dejar tu página e ir a otra, necesitan unos 20 segundos gracias a todo el peso del código javascript que le tiraste al navegador de tu pobre usuario.

En este artículo podrás encontrar una solución básica y simple que funciona bien (al menos para mí). Los únicos requerimientos javascript en mi sistema son: la librería de jquery y el plugin blockUI. Cualquier otro plugin/código js que necesito, lo cargo ante demanda solo y únicamente cuando se dispara el evento que me asegura 100% el usuario necesita dicho código y dicho plugin — click, submit de un form, etc –.

Ahora el código…

Supongamos que has desarrollado una funcionalidad que provee en tu sitio una funcionalidad web 2.0 al mejor estilo Facebook, pero para que funcione necesitas el plugin ClueTip y un archivo con tu código js. Cuando el usuario hace click en un enlace tu inicias tu funcionalidad mediante una llamada a una función, supongamos así: startMyFancyFeature(param1,param2);

Entonces lo que vamos a hacer es crear una función que se encargue los plugins y el código y luego llame a esa función. La función que vamos a crear se va a llamar loadMyFancyFeature():

var isLoadedFancyFeature = 0;
function loadMyFancyFeature() {
    if ( isLoadedFancyFeature != 1) {
        // Este usuario nunca necesito antes tu funcionalidad así que necesitamos descargar los archivos.
        // Vamos a bloquear al usuario mientras descargamos los archivos:
        $.blockUI({ message: '<h1><img src="/image_dir/your-loader.gif" />Loading...</h1>' });
        // Ahora a descargar el plugin ClueTip (a modo de ejemplo)
        jQuery.getScript( '/js/jquery.cluetip.js', function() {
            // Este código va a correr únicamente cuando el plugin haya sido cargado satifactoriamente.
            // Ahora cargemos nuestro código js
            jQuery.getScript( '/js/mycode.js', function() {
                // Ahora el usuario esta listo para ver tu funcionalidad, desbloqueemos la pantalla y que la vea.
                $.unblockUI();
                isLoadedFancyFeature = 1;
                startMyFancyFeature(param1,param2);
            });
        });
     } else {
          // Este usuario ya cargo el plugin y el código js, por lo tanto simplemente llamemos a la función.
         startMyFancyFeature(param1,param2);
     }
}

Este código es una prueba de concepto, deberás editarlo y adaptarlo a tus necesidades. Si resulta útil para ti por favor deja un comentario en este post, mi karma te estará agradecido.

Translations:

Tags: , , ,

WordPress database error: [Can't open file: 'wp_comments.MYI'. (errno: 145)]
SELECT * FROM wp_comments WHERE comment_post_ID = 147 AND comment_approved = '1' ORDER BY comment_date

Leave a Reply