Ładowanie galerii
- Podstawy
- Ładowanie synchroniczne
- Ładowanie asynchroniczne
- Uruchamianie galerii na żądanie
- Ładowanie galerii na żądanie
- Kilka galerii na jednej stronie
- Podstawy ^
Plikiem wykonywalnym galerii jest skompresowany i zakodowany plik
vg.js. Aby uruchomić galerię na serwerze, należy ten plik skopiować na serwer (do katalogu głównego lub dowolnego innego) i w kodzie strony (w sekcji
<head>) dodać następujący kod JavaScript:
(1)<script src="vg.js" charset="utf-8"></script>
To polecenie załaduje galerię, ale jej nie uruchomi. Oczywiście, gdyby galeria znajdowała się w podkatalogu, to w atrybucie
src należy podać pełną ścieżkę do pliku vg.js, np. "galeria/vg.js".
Żeby uruchomić załadowaną galerię, należy wykonać następujący kod:
(2)
new VG_start(parent, 'config.js');
parent – jest obiektem (najczęściej typu div), wewnątrz którego galeria ma zostać wyświetlona,
config.js – jest nazwą pliku konfigurującego galerię.
Jednakże przedstawione wyżej rozwiązanie niekoniecznie musi zadziałać, a to dlatego, że nie zapewniliśmy synchronizacji wykonania poszczególnych działań. Ponieważ plik galerii może ładować się przez jakiś czas – może dojść do wykonania kodu (2) zanim plik galerii (1) zostanie załadowany. W takiej sytuacji oczywiście galeria nie zostanie uruchomiona. Aby temu zapobiec musimy zapewnić, żeby kod (2) wykonał się dopiero wtedy, kiedy kod (1) będzie załadowany. Żeby to zrobić możemy kod (2) umieścić w zdarzeniu, które wykona się po załadowaniu strony:
(3)
window.addEventListener('load', function(){
new VG_start(parent, 'config.js')})
- Ładowanie synchroniczne galerii ^
Zakładając, że chcemy wyświetlić galerię
atlas, którą przygotowaliśmy w ramach przewodnika
Jak zacząć, i że plikiem konfiguracyjnym jest w związku z tym plik
atlas.js,
pełny, działający kod strony internetowej zawierający galerię uruchamianą w ten sposób wyglądałby następująco:
(4)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script src="vg.js" charset="utf-8"></script>
<script>
window.addEventListener('load', function(){
new VG_start(document.getElementById('gallery'), 'atlas.js')});
</script>
</head>
<body>
<div id="gallery" style="width:100%; height:100%"></div>
</body>
</html>
Powyższy kod zapisany w pliku
code_4.htm można tu
przetestować.
Rozwiązanie to działa, choć też nie jest pozbawione wady. Otóż ładowanie galerii wg kodu (1) odbywa się w sposób tzw. synchroniczny, czyli ładowanie kodu galerii wstrzymuje inne działania przeglądarki. Oczywiście – w sytuacji, gdy strona zawiera tylko galerię – nie ma to specjalnie wielkiego znaczenia, ale gdyby strona zawierała inne elementy, to nie mogłyby one być wyświetlone, dopóki nie załadowałaby się galeria.
- Ładowanie asynchroniczne galerii ^
Aby załadować galerię asynchronicznie (tzn. żeby strona nie czekała na załadowanie pliku galerii), należy w kodzie (1) dodać atrybut
async.
W tej sytuacji zdarzenie
load wywoływane po załadowaniu strony nie będzie już zsynchronizowane z ładowaniem galerii (w sumie o to przecież chodziło). To jednak rodzi kolejny problem :-). Otóż możemy oczywiście zdarzenie
load podpiąć do skryptu ładującego galerię, ale wtedy z kolei może się zdarzyć tak, że galeria załaduje się jako pierwsza, a obiekt, do którego będzie miała być ona podpięta nie będzie jeszcze istniał.
Rozwiązaniem najprostszym jest zamiana w kodzie (1) atrybutu
async na atrybut
defer, którego działanie polega na tym że opóźnia on wywołanie skryptu do momentu załadowania całej strony. A więc
defer należy rozumieć tak, że galeria ładuje się niezależnie od strony i jeśli jej ładowanie się przedłuża, a strona (poza galerią) jest gotowa do wyświetlenia, to zostanie ona wyświetlona (z pustym polem w miejscu galerii). Natomiast w sytuacji odwrotnej (jeśli galeria załaduje się szybciej od pozostałej części strony), to poczeka ona na pełne załadowanie strony i wtedy się uruchomi.
Pełny i działający kod strony internetowej zawierający galerię uruchamianą w ten sposób wyglądałby następująco:
(5)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script>
function startGallery(){
new VG_start(document.getElementById('gallery'), 'atlas.js');
}
</script>
<script src="vg.js" charset="utf-8" defer onload="startGallery()"></script>
</head>
<body>
<div id="gallery" style="width:100%; height:100%"></div>
</body>
</html>
Ten kod jest zapisany w pliku
code_5.htm i można go przetestować
pod tym odnośnikiem.
Inne możliwe rozwiązania, to np. ładowanie galerii asynchronicznym kodem JavaScript umieszczonym na końcu strony (przed zamknięciem
<body>). Wtedy będziemy mieli pewność, że obiekt, w którym ma się pojawić galeria będzie już istniał. Taki kod wyglądałby następująco:
(6)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
</head>
<body>
<div id="gallery" style="width:100%; height:100%"></div>
<script>
function startGallery(){
new VG_start(document.getElementById('gallery'), 'atlas.js');
}
</script>
<script src="vg.js" charset="utf-8" async onload="startGallery()"> </script>
</body>
</html>
Powyższe rozwiązanie ma taką zaletę, że galeria w żaden sposób nie wpływa na opóźnienie ładowania strony. W rozwiązaniu z
defer, mimo że ładowanie odbywa się asynchronicznie, to jednak część przepustowości łącza jest zajmowana przez galerię. W ostatnim rozwiązaniu galeria zajmuje przepustowość łącza dopiero w momencie, gdy cała strona jest już załadowana i może być wyświetlona. Użytkownik może już zacząć przeglądać stronę, a kiedy galeria się załaduje – automatycznie się uruchomi. Ten przykładowy kod jest zapisany w pliku
code_6.htm i tu jest do niego
odnośnik.
- Uruchamianie galerii na żądanie ^
Można też nie uruchamiać galerii automatycznie podczas ładowania strony, ale uruchomić ją dopiero wtedy, kiedy użytkownik wykona jakąś akcję. Popatrzmy na poniższy kod:
(7)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script>
function enableGallery(){
var parent=document.getElementById('gallery');
parent.onclick=function(){
new VG_start(this, 'atlas.js');
}
}
</script>
<script src="vg.js" charset="utf-8" defer onload="enableGallery()"> </script>
</head>
<body>
<div style="position:relative; top:10px; left:10px; width:calc(100% - 20px); max-width:600px; height:calc(100% - 20px); max-height:400px;
background-color:#444444; color:#AAAAAA; text-align:center; font-size:26px; font-family:Tahoma; line-height:400px">
Kliknij tu
<div id="gallery" style="cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%"></div>
</div>
</body>
</html>
W tym kodzie, załadowanie galerii spowoduje wykonanie funkcji
enableGallery, która uczuli div-a (w którym ma się znaleźć galeria) na kliknięcie. Dopiero jego kliknięcie uaktywni galerię. Powyższy kod (zapisany w pliku
code_7.htm) można
przetestować na naszym serwerze.
- Ładowanie galerii na żądanie ^
Kolejny przykład pokazuje, jak można nie ładować galerii automatycznie (podczas ładowania strony), ale załadować ją na żądanie (po wykonaniu jakiejś akcji przez użytkownika):
(8)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{overflow:hidden; margin: 0; padding: 0; height: 100%; background-color:#000000}
</style>
<script>
function loadAndStartGallery(parent){
var script=document.createElement('script');
parent.appendChild(script);
script.onload=function(){
new VG_start(parent, 'atlas.js');
}
script.src="vg.js";
}
</script>
</head>
<body>
<div style="position:relative; top:10px; left:10px; width:calc(100% - 20px); max-width:600px; height:calc(100% - 20px); max-height:400px;
background-color:#444444; color:#AAAAAA; text-align:center; font-size:26px; font-family:Tahoma; line-height:400px">
Kliknij tu
<div onclick="loadAndStartGallery(this)" style="cursor:pointer; position:absolute; top:0; left:0; width:100%; height:100%"></div>
</div>
</body>
</html>
W tym kodzie kliknięcie w div-a znajdującego się nad napisem
kliknij mnie spowoduje wykonanie funkcji
loadAndStartGallery, która tworzy dynamicznie obiekt typu
script, który ładuje galerią, a po jej załadowaniu automatycznie ją uruchamia. Kod z tym przykładem jest zapisany w pliku
code_8.htm i można go przetestować klikając w ten
odnośnik.
- Kilka galerii na jednej stronie ^
W tym przykładzie pokazujemy, jak załadować i wyświetlić na jednej stronie kilka galerii. Oczywiście w takim przypadku nie musimy ładować galerii wielokrotnie. Wystarczy załadować ją raz, a potem utworzyć kilka obiektów z tego samego kodu:
(9)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<name="viewport" content="initial-scale=1, width=device-width, height=device-height, user-scalable=yes">
<link rel="shortcut icon" type="image/x-icon" href="vg.ico">
<title>Wirtualna Galeria Fotografii</title>
<style>
html, body{margin: 0; padding: 0; height: 100%; background-color:#000000}
.gal{position:relative; display:inline-block; width:500px; height:350px}
</style>
</head>
<body>
<div id="gal_1" class="gal"></div>
<div id="gal_2" class="gal"></div>
<div id="gal_3" class="gal"></div>
<div id="gal_4" class="gal"></div>
<script>
function startGallery(id, config){
new VG_start(document.getElementById(id), config);
}
</script>
<script src="vg.js" charset="utf-8" async onload="
startGallery('gal_1', 'atlas.js');
startGallery('gal_2', 'k3d.js');
startGallery('gal_3', 'banner-pl1.js');
startGallery('gal_4', 'banner_nk.js'); ">
</script>
</body>
</html>
W tym wypadku do funkcji
startGallery() przekazujemy dwa parametry (tj. identyfikator div-a oraz nazwę pliku konfiguracyjnego – po to, aby w każdej galerii wyświetlić inne dane). Efekty tych działań zapisano w pliku
code_9.htm i można je zobaczyć klikając w ten
odnośnik.