Come rilevare se i file javascript sono caricati?

Question

C'è un evento che si attiva quando vengono caricati i file JavaScript? Il problema è venuto perché YSlow consiglia di spostare i file JavaScript nella parte inferiore della pagina. Ciò significa che $(document).ready(function1) viene generato prima che venga caricato il file js che contiene il codice per function1.

Come evitare questo tipo di situazione?

Answer 1

non ho un punto di riferimento per questo a portata di mano, ma i tag di script vengono elaborati in ordine, e quindi se si mette il $(document).ready(function1) in un tag script dopo i tag di script che definiscono funzione1, ecc, si dovrebbe essere buona per partire.

<script type='text/javascript' src='...'></script> 
<script type='text/javascript' src='...'></script> 
<script type='text/javascript'> 
$(document).ready(function1); 
</script> 

Naturalmente, un altro approccio sarebbe quello di garantire che si sta utilizzando un solo tag script, in totale, combinando i file come parte del processo di generazione. (A meno che tu non stia caricando gli altri da un CDN da qualche parte). Ciò contribuirà anche a migliorare la velocità percepita della tua pagina.

EDIT: Ho appena realizzato che in realtà non ho risposto alla tua domanda: Non penso che ci sia un evento cross-browser che è stato licenziato, no.C'è, se lavori abbastanza, vedi sotto. È possibile verificare i simboli ed usare setTimeout di riprogrammare:

<script type='text/javascript'> 
function fireWhenReady() { 
    if (typeof function1 != 'undefined') { 
     function1(); 
    } 
    else { 
     setTimeout(fireWhenReady, 100); 
    } 
} 
$(document).ready(fireWhenReady); 
</script> 

... ma non si deve avere a che fare che se si ottiene il vostro ordine tag script corretto.

---

Aggiornamento: È possibile ottenere le notifiche di carico per script elementi aggiunti alla pagina in modo dinamico, se volete. Per ottenere un ampio sostegno del browser, devi fare due cose diverse, ma come una tecnica combinata funziona:

function loadScript(path, callback) { 

    var done = false; 
    var scr = document.createElement('script'); 

    scr.onload = handleLoad; 
    scr.onreadystatechange = handleReadyStateChange; 
    scr.onerror = handleError; 
    scr.src = path; 
    document.body.appendChild(scr); 

    function handleLoad() { 
     if (!done) { 
      done = true; 
      callback(path, "ok"); 
     } 
    } 

    function handleReadyStateChange() { 
     var state; 

     if (!done) { 
      state = scr.readyState; 
      if (state === "complete") { 
       handleLoad(); 
      } 
     } 
    } 
    function handleError() { 
     if (!done) { 
      done = true; 
      callback(path, "error"); 
     } 
    } 
} 

Nella mia esperienza, notifica di errore (onerror) non è al 100% cross-browser affidabile. Si noti inoltre che alcuni browser eseguiranno entrambi i meccanismi, quindi la variabile done per evitare le notifiche duplicate.

Ultima domanda

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Problemi correlati

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.