Wstępnie załaduj JS, ale nie uruchamiaj go

Chcę wstępnie załadować duży plik JS po wczytaniu strony, tak aby po połączeniu z tym plikiem JS na wymaganej stronie została już pobrana i zapisana w pamięci podręcznej.Wstępnie załaduj JS, ale nie uruchamiaj go

Ja w zasadzie robi to w tej chwili, i to działa, ale oczywiście to nie jest właściwa droga:

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

Wydaje taki szybki i prosty sposób, bez Ajax potrzebne itd. I działa świetnie.

Jaki jest właściwy sposób na zrobienie tego? Na pewno nie z Ajaxem, ponieważ wydaje się to przesadzone.

Wiem, że istnieje wiele metod ładowania JS, ale wszystkie wydają się uruchamiać kod po załadowaniu skryptu, czego nie chcę.

Nie chcę używać jQuery (ani żadnej biblioteki), musi to być zwykły JS. Dzięki za pomoc.

Źródło

2013-05-17 user2143356

Podejrzewam, że nie ma "czystszego" rozwiązania. Dobre pytanie. Fajny hack. –

Czy możesz po prostu owinąć swój kod w deklarację funkcji, którą możesz wywołać, kiedy jest to potrzebne, i dołączyć do niego znacznik '

Od this blog post:

Wgrywanie elementy wyprzedzeniem jest dobre dla wydajności. Istnieje kilka sposobów na zrobienie tego. Ale nawet najczystsze rozwiązanie (otwórz iframe i zwariuj tam) ma swoją cenę - cenę iframe oraz cenę parsowania i wykonania wstępnie załadowanego kodu JavaScript i kodu JavaScript CSS oraz . Istnieje również stosunkowo wysokie ryzyko potencjalnych błędów JavaScriptu, jeśli wstępnie załadowany skrypt zakłada, że jest on załadowany na inną stronę niż ta, która jest wstępnie ładowana.

Po trochę prób i dużo błędów myślę wymyślił coś które mogłyby pracować cross-browser:

w IE korzystania new Image().src wstępnego ładowania wszystkich typów komponentów

we wszystkich innych przeglądarek wykorzystywać dynamiczny <object> tag

W tym przykładzie zakładam wstępnie wyłapuje stronę po onload niektórych składników, które będą potrzebne przy następnej stronie. Składniki to CSS, JS i PNG (ikonka).
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); 
    } 

}; 

Zobacz the post więcej szczegółów.

EDIT: Patrząc na komentarze na tym stanowisku, ktoś wspomina this link, który opowiada o problemach z metodą new Image() napięcia wstępnego w IE i innych przeglądarek. Oto fragment:

Kiedy IE napotka znacznik IMG, tworzy obiekt obrazu i przypisuje do niego żądanie pobrania. Gdy dane pochodzą z pobierania obrazu, , jest on wprowadzany do dekoderów obrazu przeglądarki. Dekodery będą odrzucać dane zniekształcone, jeśli je udostępnisz, co wydaje się rozsądne, ponieważ nie mogą one wykorzystać takich danych.Gdy dekodery odrzucają dane jako "Nieprawdopodobnie obraz", obiekt obrazu przerwie przetwarzanie. W ramach tego abortu, jeśli pobieranie nie zostało jeszcze zakończone, jest ono również przerywane.

Wyjaśnia to zachowanie wymienione przez OP w komentarzu poniżej (IE9 pobiera tylko 4 KB pliku).

Wydaje się swoim jedynym wiarygodnym opcji cross-browser może być użycie Ajax ...

Źródło

2013-05-17 05:37:18

Nie odebrałem odpowiedzi, ponieważ miałem duże problemy. Kod taki jak ten powoduje problemy na iPhone'ach i IE9 (i tak naprawdę nie testowałem więcej niż to). IPhone ładuje się wiekiem (przy użyciu metody podanej w kodzie) i preferuje metodę, której używa kod dla IE (która wtedy działa dobrze). IE9 pobiera tylko około 4k pliku, co jest bezużyteczne. Dzięki za wskazanie rozwiązania, ale po prostu nie nadaje się do użytku. – user2143356

OK, więc wygląda na to, że AJax jest potrzebny. Problemem są wszystkie te śmieci między domenami. Wszystkie pliki JS znajdują się w CDN, w tym jQuery hostowane przez Google CDN, ale wciąż mam problem z wieloma domenami. Czytałem o JSONP, ale ludzie wciąż mówią o callbackach. Po prostu chcę wstępnie załadować plik. Przykład image.src jest szybki i prosty (jeśli zadziałał!). Czy istnieje prosty parametr do dodania do mojego Ajaxa? Używam podstawowego wanilskiego skryptu Ajax. – user2143356

USE

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

window.document.onload upewnić się, że skrypt Java nie będą działać aż DOM jest gotowy

Źródło

2013-05-17 06:18:03

To całkowicie źle rozumie pytanie. – slebetman

Powiązane problemy