JavaScript w przykładach - Preloading obrazków












JavaScript   
w przykładach                
http://javascript.jest.o.k.pl















Preloading obrazków






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.








Instrukcja







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 <[e-mail]>

// 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 Imgi = new Array(); // Tablica obrazków
var Bledy = 0; // Liczba błędów
var preloadTimer; // Timer używany dalej
var preloadOK = '' // Kod do wykonania po zakończeniu ładowania
var preloadBlad = '' // j.w., ale jeśli wystąpi jakiś błąd

// rozpoczyna ścišganie obrazka
function preload(url) {
if (document.images) {
var i = Imgi.length;
Imgi[i] = new Image();
Imgi[i].onerror = preloadOnError;
Imgi[i].src = url;
}
}

// wywyoływana, jeśli wystąpił jakiś błąd - ustawia flagę Blad
function preloadOnError() {
Bledy++;
}

// ustala, co należy zrobić po zakończeniu preloadu, uruchamia pętlę
function preloadStart(ok, blad) {
preloadOK = ok;
preloadBlad = blad;
preloadCheck();
}

// sprawdza, czy ładowanie się już zakończyło
function preloadCheck() {
var i=0;
var l=Imgi.length;
var b = Bledy;
// Trochę zagęszczonego kodu:
while (i<l && Imgi[i].complete || b-->0) i++;
if (i>=l) // to już wszystkie (wyjście z pętli na 1. warunku)
if (Bledy==0)
eval(preloadOK)
else
eval(preloadBlad)
else // któryś nie był ukończony
preloadTimer = setTimeout('preloadCheck()',100);
}

// Tu możesz umieścic wywołania funkcji ładujących obrazki.

//-->
</script>


Zwróć uwagę na fragment Imgi[i].onerror = preloadOnError;. 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: onerror="preloadOnError()". 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.


Warto też przyjrzeć się linii while (i<l && Imgi[i].complete || b-->0) i++;. Mamy tu do czynienia z pętlą sprawdzającą, czy wszystkie obrazki zostały załadowane. Uczyniłem użytek z faktu, że w JS wyrażenia logiczne są rozważane w sposób oszczędny, np. jeśli to, co jest po lewej stronie operatora "lub" jest prawdą, to prawa strona nie jest nawet spradzana. Najpierw upewniam się, czy nie zostały przejrzane wszystkie obrazki z tablicy - jeśli tak, i byłoby równe l (czyli długości tej tablicy). Jeśli nie, patrzę, czy obrazek został pomyślnie ukończony (odczytując pole complete). Jeśli nie - zmniejszam licznik b, który na początku pętli przechowywał liczbę obrazków, które zakończono z błędem - b-- (dla nich pole complete to false!), ale najpierw sprawdzam, czy b było większe od zera (b>0 - te dwie operacje można zespoić uzyskując taką właśnie "strzałkę"). Oznacza to, że z całej pętli wyjdę: (a) dlatego, że i==l - i to oznacza, że wszystko zostało zrobione, (b) dlatego, że obrazków nie ukończonych pomyślnie było więcej niż tych ukończonych z błędem - czyli jakieś jeszcze nie zostały ukończone wcale. Uff.


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');
preload('/graf/logo.jpg');
preload('http://adres.com/zdjecie.jpeg');
preloadStart('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. Jedyny argument tej funkcji to adres (względny lub absolutny) pliku, który ma zostać załadowany. Funkcji preloadStart() 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ę ]





Przykład







<a href="http://javascript.jest.o.k.pl/graf/trasa.gif" onclick="
preload('http://javascript.jest.o.k.pl/graf/trasa.gif');
preloadStart(
'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ę ]







 




Szybki skok:


Instrukcja


Przykład


 


JavaScript:


Teoria


Przykłady


Licencja


Bannery:


- w pasku stanu


- w okienku


- w pasku tytułu


- na przycisku


- Dalekopis


Nawigacyjne:


- Aktywny przycisk


- Przekierowanie


- Replace


Podpowiadacze:


- Pasek stanu DHTML


- Dymki DHTML


- Podmiana grafiki


Cegiełki:


- Zegarek


- Losowy tekst


- Odliczanie do Y2K


Inne:


- Pogromca ramek


- Preload


- Inteligentny dialog


Warsztat


JS w akcji


Linki


 


O autorze:


E-mail


Strona domowa


 


Znajdź w JSwp:( Jak szukać? )


Aby otrzymywać informacje o aktualizacjach na tych stronach, podaj swój e-mail:


Wersja offline



















© 1998-2000 Maciej Szczepaniak