2013-05-17 12 views
7

Desidero precaricare un file JS di grandi dimensioni dopo che una pagina è stata caricata, in modo che quando si collega a quel file JS nella pagina richiesta è già scaricato e memorizzato nella cache.Precarica JS, ma non eseguirlo

sto praticamente facendo in questo momento, e funziona, ma ovviamente non è la strada giusta:

preload_js = new Image(); 
preload_js = "http://domain.com/files/file.js"; 

Questo sembra un metodo come semplice e veloce, senza bisogno di Ajax, ecc ed è funziona alla grande.

Qual è il modo corretto per farlo? Sicuramente non con Ajax in quanto sembra eccessivo per questo.

So che ci sono molti metodi per caricare JS ma sembrano tutti eseguire il codice dopo che lo script è stato caricato, cosa che non voglio.

Non voglio usare jQuery (o qualsiasi libreria), deve essere semplice JS. Grazie per qualsiasi aiuto.

+0

Sospetto che non esista una soluzione "più pulita". Buona domanda. Bel trucco. –

+3

Si può semplicemente avvolgere il proprio codice in una dichiarazione di funzione che è possibile chiamare quando è necessario e includerlo con un tag '

3

Da this blog post:

precarico componenti di anticipo è buono per le prestazioni. Ci sono diversi modi per farlo. Ma anche la soluzione più pulita (aprire un iframe e impazzire lì) ha un prezzo - il prezzo dell'iframe e il prezzo di analisi ed esecuzione del CSS precaricato e del codice JavaScript . Esiste anche un rischio relativamente elevato di potenziali errori JavaScript se lo script che si precarica presuppone che sia caricato in una pagina diversa da quella che precarica.

Dopo un po 'di tentativi e molti errori penso mi si avvicinò con qualcosa che potrebbe funzionare cross-browser:

  • in IE usano new Image().src per precaricare tutti i tipi di componenti
  • in tutti gli altri browser utilizzare una dinamica <object> tag

In questo esempio presumo le precaricamenti pagina dopo onload alcuni componenti che saranno necessarie per la pagina successiva. I componenti sono un CSS , un JS e un PNG (sprite).

window.onload = function() { 

    var i = 0, 
     max = 0, 
     o = null, 

     // list of stuff to preload 
     preload = [ 
      'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.png', 
      'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.js', 
      'http://tools.w3clubs.com/pagr2/<?php echo $id; ?>.sleep.expires.css' 
     ], 
     isIE = navigator.appName.indexOf('Microsoft') === 0; 

    for (i = 0, max = preload.length; i < max; i += 1) { 

     if (isIE) { 
      new Image().src = preload[i]; 
      continue; 
     } 
     o = document.createElement('object'); 
     o.data = preload[i]; 

     // IE stuff, otherwise 0x0 is OK 
     //o.width = 1; 
     //o.height = 1; 
     //o.style.visibility = "hidden"; 
     //o.type = "text/plain"; // IE 
     o.width = 0; 
     o.height = 0; 


     // only FF appends to the head 
     // all others require body 
     document.body.appendChild(o); 
    } 

}; 

Vedere the post per maggiori dettagli.


EDIT: Guardando le commenti su questo post, qualcuno accenna this link, che parla dei problemi con il metodo new Image() precarico in IE e altri browser. Ecco un estratto:

Quando IE incontra un tag IMG, si crea un oggetto di immagine e assegna la richiesta di download ad esso. Poiché i dati arrivano dal download dell'immagine, viene inserito nei decodificatori di immagine del browser. I decodificatori rifiuteranno i dati come malformati se li si alimenta in testo normale, il che sembra ragionevole, poiché non è possibile utilizzare tali dati.Quando i decodificatori rifiutano i dati come "Non possibilmente un'immagine", l'oggetto immagine sostituirà l'elaborazione . Come parte di tale interruzione, se il download non è stato completato con lo , anche questo viene annullato.

Questo spiega il comportamento indicato dall'OP nel commento seguente (IE9 scarica solo 4 KB del file).

Sembra che l'unica opzione affidabile cross-browser può essere quella di utilizzare Ajax ...

+0

Non ho accettato la risposta perché ho avuto grossi problemi. Il codice così com'è causa problemi su un iPhone e IE9 (e non ho ancora testato più di questo). Un iPhone impiega anni per caricare (utilizzando il metodo nel codice) e preferisce il metodo utilizzato dal codice per IE (che quindi funziona correttamente). IE9 scarica solo circa 4k del file, che è inutile. Grazie per aver indicato la soluzione, ma non è utilizzabile. – user2143356

+0

Ok, quindi sembra che AJax sia necessario. Il problema è tutto questo spazzatura cross domain. Tutti i file JS sono su un CDN, incluso jQuery ospitato da Google CDN, ma continuo a ricevere il problema del dominio incrociato. Ho letto su JSONP ma la gente continua a parlare di callback. Voglio solo precaricare un file. L'esempio image.src è veloce e semplice (se ha funzionato!). C'è un semplice parametro da aggiungere al mio Ajax? Sto usando uno script Ajax di base per la vaniglia. – user2143356

2

USO

window.document.onload =function(){ 
preload_js = "http://domain.com/files/file.js"; 
} 

window.document.onload assicurarsi che il java script non verrà eseguito fino a quando dom è pronto

+3

Questo fraintende completamente la domanda. – slebetman

Problemi correlati