2011-01-07 30 views
7

En mi sitio tengo una función jquery que recupera datos de otro servidor (protegido) tan pronto como se carga la página. Usando una llamada jsonp actualmente cargar estos datos después del evento listo documento:Pruebe si jquery está cargado y no utilizando el evento de documento preparado

<script type="text/javascript"> 
    $(document).ready(function() { 
     $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) { 
      initPage(data); 
     }); 
    }); 
</script> 

Lo que no me gusta de la llamada anterior, es que la realidad puede ser jsonp exectued antes del evento listo documento, por lo que ralentizan la carga de página Así que si incluyo jQuery dentro de la página (es decir, no hace referencia a utilizar la etiqueta script), entonces el siguiente código funciona muy bien y se carga la página más rápido:

<script type="text/javascript"> 
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) { 
     $(document).ready(function() { 
      initPage(data); 
     }); 
    }); 
</script> 

Pero incluyendo jQuery en cada página es una 23k los gastos operativos que yo' me gusta evitar ¿Cómo puedo probar para ver si se ha cargado jquery y solo se excede la función initPage() cuando se ha cargado jquery?

Edit: Para ser más precisos necesito comprobar repetidamente si jquery está cargado y luego ejecutar el evento. Un trabajo del temporizador podría ser la solución.

Solución: He creado un preinit que hace la comprobación de jquery. La carga de mi página no podría ser más rápida :). ¡Gracias a todos!

function preInit() 
    { 
     // wait until jquery is loeaded 
     if (!(typeof jQuery === 'function')) { 
      window.setTimeout(function() { 
       //console.log(count++); 
       preInit(); 
      }, 10); // Try again every 10 ms.. 
      return; 
     } 
      $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', 
      function (data) { 
       $(document).ready(function() { 
        initPage(data); 
       }); 
      }); 
     } 

Respuesta

5

Creo que sólo podría utilizar

if (jQuery) { 
    ... 
} 

para ver si existe el objeto jQuery.

Ok, mejor sería:

if (typeof jQuery !== 'undefined') { 
    ... 
} 

o

if (typeof jQuery === 'function') { 
    ... 
} 

EDIT:

No se preocupe por la sobrecarga o si el objeto jQuery se carga. Si usted acaba de incluir la librería jQuery usando una etiqueta <script src="..."> regular y luego ejecutar el código sin el $(document).ready, así:

<script type="text/javascript"> 
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) { 
     initPage(data); 
    }); 
</script> 

Se trabajará. La parte $(document).ready es solo para garantizar que el DOM se haya cargado por completo antes de intentar cambiar los elementos DOM que aún no están cargados. La biblioteca jQuery en sí misma, incluida la funcionalidad Ajax, estará allí de inmediato.

Ahora, si su llamada initPage(data) utiliza el DOM, que supongo que lo hace, usted podría ponga una marca en la que, como este:

<script type="text/javascript"> 
    function initPage(data) { 
     var $domObject = $('#your-dom-object'); 
     if ($domObject.length === 0) { // Dom object not loaded yet. 
      window.setTimeout(function() { 
       initPage(data); 
      }, 0); // Try again after other stuff has finished. 
      return; 
     } 
     // Do your regular stuff here. 
    } 
</script> 

Sin embargo, no creo que esto sería necesario en la mayoría de las situaciones.

+0

eso es casi la misma. pero no sé cuánto tardaría en cargar jquery. Tendría que repetir ese control hasta que se cargue jquery. Podría crear un tiempo que verifique cada 10ms más o menos ... Pero eso no se siente bien ... – AyKarsi

+1

Ah, ¿es eso lo que quieres decir? Pensé que querías decir que querías probar si jQuery estaba cargado. En ese caso, estoy bastante seguro de que jquery ha terminado de cargarse para cuando salga de la etiqueta '

1

Siempre que coloque la etiqueta de script que incluye jQuery encima de la etiqueta del script que ejecuta su función, entonces debería funcionar bien.

Envolver la secuencia de comandos en este lugar de la función lista puede ayudar a:

(function() { 
    // Your code here 
})(); 
+0

Esto es exactamente lo mismo que $ (document) .ready (function() {}). Solo una versión abreviada. –

+0

Lo uso para ejecutar funciones a medida que el documento se carga sin jQuery incluido. No sabía que jQuery cambia la funcionalidad de esto? – Olical

+0

@Matt Eso sería '$ (function() {...});' :) @ Wolfy87 Esta es una buena manera de encapsular el código, pero no cambia mucho. Por otra parte, no creo que nuestro póster necesite muchos cambios. –

0

puede añadirse a cargar la función completa o rejilla función completa como se muestra a continuación que le ayudará a hacer alguna operación en jqGrid

height : '550', 
    width : '787', 
    loadComplete : function() {} 
    gridComplete:function(){} 
0

hola creo que primero debe comprobar que es jQuery y el método que se va a utilizar se define o no

si (typeof (jQuery)! = 'Definido' & & typeof ($. Ajax)! = 'Definido') {//
su código vendrá aquí
}

0

Lo que no me gusta de la llamada anterior, es que la realidad jsonp puede exectued antes de que el documento listo caso

está usted seguro de eso ?! Tenga en cuenta que todavía puede tener imágenes loading..etc
supongo que es necesario utilizar:

$(window).load(function() { 
    $.getJSON(_secureHost + '/base/members/current.aspx?callback=?', function (data) { 
     initPage(data); 
    }); 
}); 

Link

+0

Realmente quiero ejecutar el jsonp lo antes posible. documento listo significa, el dom está listo para la manipulación. Mientras respeto el documento listo antes de comenzar a manipular, estoy bien. – AyKarsi

0

que estaba usando el plugin jQuery footable. Esto funcionó para mí:

if ($.fn.footable) 
{...} 

versión de jQuery - 1.9.1 versión footable - 0,5

Cuestiones relacionadas