2011-01-07 12 views
7

Sul mio sito ho una funzione jquery che recupera i dati da un altro server (protetto) non appena viene caricata la pagina. Utilizzando una chiamata jsonp Attualmente caricare questi dati dopo il documento evento pronto:Verifica se jquery è caricato non utilizzando l'evento pronto per il documento

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

Quello che non mi piace circa la chiamata di cui sopra, è che il jsonp può effettivamente essere su stuttura prima dell'evento pronto documento, rallentando in questo modo la caricamento della pagina. Quindi, se includo jQuery all'interno della pagina (cioè non fa riferimento utilizzando il tag script), quindi il seguente codice di grandi opere e la pagina viene caricata più velocemente:

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

Ma tra cui jQuery in ogni pagina è un 23k in testa che io' mi piace evitare. Come posso testare per vedere se jquery è stato caricato e solo l'escecare la funzione initPage() quando jquery è stato caricato?

Modifica: Per essere più precisi ho bisogno di controllare ripetutamente se jquery è caricato e quindi eseguire l'evento. Un lavoro con timer potrebbe essere la soluzione ..

Soluzione: Ho creato un preinit che esegue il controllo jquery. Il caricamento della mia pagina non potrebbe essere più veloce :). Grazie a tutti!

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); 
       }); 
      }); 
     } 

risposta

5

penso che si potrebbe utilizzare

if (jQuery) { 
    ... 
} 

per vedere se l'oggetto esiste jQuery.

Ok, meglio sarebbe:

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

o

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

EDIT:

Non preoccuparti per il sovraccarico o se l'oggetto jQuery è caricato. Se hai appena includere la libreria jQuery utilizzando un normale <script src="..."> tag e quindi eseguire il codice senza il $(document).ready, in questo modo:

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

Funzionerà. La parte $(document).ready serve solo a garantire che il DOM sia completamente caricato prima di andare in giro cercando di cambiare gli elementi DOM che non sono ancora stati caricati. La libreria jQuery stessa, inclusa la funzionalità Ajax, sarà subito disponibile.

Ora, se la chiamata initPage(data) utilizza il DOM, che presumo lo fa, si potrebbe mettere un check-in che, in questo modo:

<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> 

Tuttavia, non credo che questo sarebbe necessario nella maggior parte delle situazioni.

+0

questo è quasi esso. ma non so quanto tempo ci vorrebbe per caricare effettivamente jquery. Dovrei ripetere quel controllo finché non viene caricato jquery. Potrei creare un tempo che controlla ogni 10ms o così .. Ma questo non mi fa sentire bene .. – AyKarsi

+1

Ah, è questo che intendi? Pensavo volevi dire che volevi testare se jQuery fosse stato caricato. In tal caso, sono abbastanza sicuro che jquery ha terminato il caricamento quando esci dal tag '

1

Finché si posiziona il tag script che include jQuery sopra il tag script che esegue la funzione, dovrebbe funzionare correttamente.

Wrapping lo script in questo anziché la funzione pronta può aiutare:

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

Questo è lo stesso di $ (document) .ready (function() {}). Solo una versione abbreviata. –

+0

Lo uso per eseguire funzioni mentre il documento viene caricato senza jQuery incluso. Non sapevo che jQuery cambia la funzionalità di questo? – Olical

+0

@Matt Sarebbe '$ (function() {...});' :) @ Wolfy87 Questo è un buon modo per incapsulare il codice, ma non cambia molto. Quindi, ancora una volta, non penso che il nostro poster abbia bisogno di un sacco di cambiamenti. –

0

È possibile aggiungere o caricare la funzione completa o griglia completa funzione, come mostrato di seguito che vi aiuterà a fare qualche operazione su jqGrid

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

hi Penso che si dovrebbe prima verificare che è jQuery e il metodo che si intende utilizzare è definita o no

if (typeof (jQuery)! = 'Undefined' & & typeof ($. Ajax)! = 'Undefined') {//
il codice verrà qui
}

0

Quello che ho non mi piace di quanto sopra chiamata, è che il jsonp può effettivamente essere su stuttura prima che il documento pronto evento

sono sicuro di questo ?! si prega di notare che si può ancora avere immagini loading..etc
immagino è necessario utilizzare:

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

Link

+0

Attualmente desidero eseguire jsonp il prima possibile. documento pronto significa, il dom è pronto per la manipolazione. fintanto che rispetto il documento prima di iniziare a manipolare, sono a posto. – AyKarsi

0

stavo usando plugin per jQuery footable. Questo ha funzionato per me:

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

versione jQuery - 1.9.1 versione footable - 0.5

Problemi correlati