JavaScript  

Jeśli używamy na stronie skryptów podmieniających obrazki, aby uniknąć pojawiania się pustych kwadracików, musimy wcześniej załadować wszystkie potrzebne pliki do cache'a przeglądarki. Tę czynność nazwywa się właśnie z angielska preloadowaniem - raz ściągnięty z serwera obrazek jest potem pobierany z pamięci podręcznej, a to doskonale przyspiesza jego wyświetlanie. Tego skryptu możemy też użyć, jeśli chcemy załadować wszystkie potrzebne grafiki przed przekierowaniem użytkownika do strony, gdzie zostaną one wyświetlone.

Na początku dokumentu, w sekcji HEAD należy wkleić następujący kod:

<script language="JavaScript" type="text/javascript">                 
<!--                                                                  
// Niniejszy skrypt pochodzi z serwisu "JavaScript w przykladach"     
// Copyright (C) 1999 Maciej Szczepaniak <maciek@wls1.ch.pwr.wroc.pl> 
                                                                      
// Skrypt objety jest licencja GNU General Public License.            
// Koniecznie przeczytaj pelna informacje o licencji pod adresem:     
//     http://javascript.jest.o.k.pl/archiwum.html#l                  
                                                                      
                                                                      
var preloadImgs = new Array();                                        
var preloadImgsQueued=0;  // Tyle obraków jest w trakcie przetwarzania
var preloadError = false; // Czy wystąpił jakiś błąd?                 
var preloadWhenOK = '';   // Kod do wykonania, jeśli wszystko jest OK 
var preloadWhenErr = '';  // Kod do wykonania, jeśli już koniec       
                          // ściągania, ale wystąpiły błędy.          
                                                                      
// rozpoczyna ściąganie obrazka                                       
function preload(plik, liczbaKlatek) {                                
   if (document.images) {                                             
      var i = preloadImgs.length;                                     
      preloadImgs[i] = new Image();                                   
      preloadImgs[i].src = plik;                                      
      preloadImgsQueued += liczbaKlatek;                              
      preloadImgs[i].onload = ok;                                     
      preloadImgs[i].onerror = blad;                                  
   }                                                                  
}                                                                     
                                                                      
// wywoływana po każdym udanym załadowaniu obrazka                    
function ok() {                                                       
   preloadImgsQueued--;                                               
   if (preloadImgsQueued<=0) all_done();                              
}                                                                     
                                                                      
// jw., ale gdy nastąpi błąd                                          
function blad() {                                                     
   preloadError = true;                                               
   preloadImgsQueued--;                                               
   if (preloadImgsQueued<=0) all_done();                              
}                                                                     
                                                                      
// wszystko zrobione - wykonuje odpowiedni fragment kodu              
function all_done() {                                                 
   if (preloadError) eval(preloadWhenErr)                             
   else eval(preloadWhenOK);                                          
}                                                                     
                                                                      
// ustala, co należy zrobić po zakończeniu preloadu,                  
// jeśli już się zakończył - wykonuje                                 
function preloadWhenReady(when_ok, when_err) {                        
   preloadWhenOK = when_ok;                                           
   preloadWhenErr = when_err;                                         
   if (preloadImgsQueued<=0) all_done();                              
}                                                                     
                                                                      
// Tu możesz umieścic wywołania funkcji ładujących obrazki.           
                                                                      
//-->                                                                 
</script>                                                             

Zwróć uwagę na fragment preloadImgs[i].onload = ok;. W ten sposób właśnie ustala się 'event handlers' dla różnych obiektów z poziomu JavaScriptu. Gdyby to był obrazek wstawiany na stronę za pomocą zwykłego HTMLu, byłoby to równoważne następującemu ustaleniu atrybutu znacznika IMG: onload="ok()". W naszym kodzie nie ma jednak ani nawiasów po nazwie funkcji, ani cudzysłowów - odwołujemy się bowiem bezpośrednio do funkcji jako obiektu, a nie do łańcucha znaków zawierającego jej wywołanie - jak to ma miejsce w HTMLu.

Dodatkowo pamiętamy, że w przypadku animowanych gifów zdarzenie onload jest wywoływane po załadowaniu każdej klatki animacji - dlatego musimy wiedzieć z góry, na ile klatek chcemy czekać zanim będziemy mogli uznać preloading za zakończony.

Teraz możemy w dowolnym miejscu strony (a także np. we wklejonym fragmencie w zaznaczonym miejscu) ze skryptu wywołać funkcje, które dokonają preload obrazków. To wywołanie może wyglądać tak:

preload('images/pierwszy.gif', 1);                                    
preload('images/animowany.gif', 5);                                   
preload('/graf/logo.jpg', 1);                                         
preload('http://adres.com/zdjecie.jpeg', 1);                          
preloadWhenReady('window.location = "prezentacja.html"',              
  'alert("Wystąpił błąd przy ładowaniu obrazków.\nNie obejrzysz mojej prezentacji.")');

Można użyć dowolnej liczby poleceń preload() - każda taka linijka powoduje rozpoczęcie ładowania danego pliku z obrazkiem. Pierwszy argument tej funkcji to adres (względny lub absolutny) pliku, drugi - liczba klatek animacji zawartych w obrazku. Zazwyczaj będzie to 1 - inna wartość powinna się pojawić tylko, jeśli mamy do czynienia z animowanym gifem. Funkcji preloadWhenReady() powinniśmy użyć tylko raz - już po określeniu wszystkich grafik do załadowania. Jako pierwszy argument podajemy string z kodem do wykonania, gdy wszystkie pliki załadują się bez błędów - może to być np. rozpocznij_animacje() lub przekierowanie do innej strony - jak w przykładzie. Drugi argument to kod, który zostanie wykonany po zakończeniu preloadowania, jeśli wystąpią jakieś błędy. Możemy jednak np. chcieć pokazać użytkownikowi naszą prezentację nawet, jeśli nie wszystkie obrazki się załadowały - wtedy podajemy dwa razy ten sam kod.

Chociaż można w zasadzie użyć tego skryptu do preloadowania dowolnych plików - nie tylko obrazków, to musimy pamiętać, że w przypadku plików innego rodzaju zawsze zostanie wykonany kod przeznaczony do obsługi błędów. Dzieje się tak dlatego, że przeglądarka sprawdza nie tylko, czy plik został przesłany przez serwer, ale także czy jest on poprawną grafiką - jeśli więc będzie to np. plik dźwiękowy, zostanie wywołane zdarzenie onerror.

[ Powrót na górę ]

<a href="http://javascript.jest.o.k.pl/graf/trasa.gif" onclick="
preload('http://javascript.jest.o.k.pl/graf/trasa.gif');
preloadWhenReady(
  'window.location = \'http://javascript.jest.o.k.pl/graf/trasa.gif\'', 
  'alert(\'Plik nie jest dostepny\')'
);
return false;
">
...
</a>

Kliknięcie tego odsyłacza (kod powyżej) spowoduje preloadowanie obrazka, a dopiero potem jego wyświetlenie lub pokazanie komunikatu o błędzie. W przeglądarkach nie obsługujących JS obrazek zostanie po prostu otwarty jak zwykły link. Spróbuj

[ Powrót na górę ]