123

Attention! The website uses cookies to offer you better browsing experience. Find out more on Privacy Policy. Now your browser has blocked cookies. This information will be displayed until you enable cookies in your browser.
I understand and accept cook­ies!
*
:
DC
#
/
o
[
]
Z
U
H

Ładowanie galerii

  1. Podstawy
  2. Ładowanie synchroniczne
  3. Ładowanie asynchroniczne
  1. Uruchamianie galerii na żądanie
  2. Ładowanie galerii na żądanie
  3. Kilka galerii na jednej stronie


  1. Podstawy   ^

Pli­kiem wy­ko­ny­wal­nym ga­le­rii jest skom­pre­so­wa­ny i za­ko­do­wa­ny plik vg.js. Aby uru­cho­mić ga­le­rię na ser­we­rze, na­le­ży ten plik sko­pio­wać na ser­wer (do ka­ta­lo­gu głó­wne­go lub do­wol­ne­go in­ne­go) i w ko­dzie stro­ny (w sek­cji <head>) do­dać na­stę­pu­ją­cy kod Java­Script:

(1)<script src="vg.js" charset="utf-8">​</script>

To po­le­ce­nie za­ła­du­je ga­le­rię, ale jej nie uru­cho­mi. Oczy­wiś­cie, gdy­by ga­le­ria znaj­do­wa­ła się w pod­ka­ta­lo­gu, to w atry­bu­cie src na­le­ży po­dać peł­ną ścież­kę do pli­ku vg.js, np. "galeria/vg.js".

Żeby urucho­mić za­ła­do­wa­ną ga­le­rię, na­le­ży wy­ko­nać na­stę­pu­ją­cy kod:

(2)
new VG_start(parent, 'config.js');


parent – jest obiektem (najczę­ściej typu div), wewnątrz któ­re­go ga­le­ria ma zo­stać wy­świet­lo­na,
config.js – jest na­zwą pli­ku kon­fi­gu­ru­ją­ce­go ga­le­rię.

Je­dnak­że przed­sta­wio­ne wy­żej roz­wią­za­nie nie­ko­nie­cznie mu­si za­dzia­łać, a to dla­te­go, że nie za­pe­wni­liś­my syn­chro­ni­za­cji wy­ko­na­nia po­szcze­gól­nych dzia­łań. Po­nie­waż plik ga­le­rii mo­że ła­do­wać się przez ja­kiś czas – mo­że do­jść do wy­ko­na­nia ko­du (2) za­nim plik ga­le­rii (1) zo­sta­nie za­ła­do­wa­ny. W ta­kiej sy­tua­cji oczy­wi­ście ga­le­ria nie zo­sta­nie uru­cho­mio­na. Aby te­mu za­po­biec mu­si­my za­pe­wnić, że­by kod (2) wy­ko­nał się do­pie­ro wte­dy, kie­dy kod (1) bę­dzie za­ła­do­wa­ny. Że­by to zro­bić mo­że­my kod (2) umie­ścić w zda­rze­niu, któ­re wy­ko­na się po za­ła­do­wa­niu stro­ny:

(3)
window.addEventListener('load', function(){
new VG_start(parent, 'config.js')})


  1. Ładowanie synchroniczne galerii   ^

Za­kła­da­jąc, że chce­my wy­świet­lić ga­le­rię at­las, któ­rą przy­go­to­wa­liś­my w ra­mach przewodnika Jak za­cząć, i że pli­kiem kon­fi­gu­ra­cyj­nym jest w związ­ku z tym plik atlas.js, peł­ny, dzia­ła­ją­cy kod stro­ny in­ter­ne­to­wej za­wie­ra­ją­cy ga­le­rię uru­cha­mia­ną w ten spo­sób wy­glą­dał­by na­stę­pu­ją­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ć.

Roz­wią­za­nie to dzia­ła, choć też nie jest po­zba­wio­ne wa­dy. Otóż ła­do­wa­nie ga­le­rii wg ko­du (1) od­by­wa się w spo­sób tzw. syn­chro­nicz­ny, czy­li ła­do­wa­nie ko­du ga­le­rii wstrzy­mu­je in­ne dzia­ła­nia przeg­lą­dar­ki. Oczy­wi­ście – w sy­tua­cji, gdy stro­na za­wie­ra tyl­ko ga­le­rię – nie ma to spe­cjal­nie wiel­kie­go zna­cze­nia, ale gdy­by stro­na za­wie­ra­ła in­ne ele­men­ty, to nie mog­ły­by one być wy­świet­lo­ne, do­pó­ki nie za­ła­do­wa­ła­by się ga­le­ria.


  1. Ł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 sy­tua­cji zda­rze­nie load wy­wo­ły­wa­ne po za­ła­do­wa­niu stro­ny nie bę­dzie już zsyn­chro­ni­zo­wa­ne z ła­do­wa­niem ga­le­rii (w su­mie o to prze­cież cho­dzi­ło). To je­dnak ro­dzi ko­lej­ny prob­lem :-). Otóż mo­że­my oczy­wi­ście zda­rze­nie load pod­piąć do skryp­tu ła­du­ją­ce­go ga­le­rię, ale wte­dy z ko­lei mo­że się zda­rzyć tak, że ga­le­ria za­ła­du­je się ja­ko pier­wsza, a obiekt, do któ­re­go bę­dzie mia­ła być ona pod­pię­ta nie bę­dzie je­szcze ist­niał.

Roz­wią­za­niem naj­pro­stszym jest za­mia­na w ko­dzie (1) atry­bu­tu async na atry­but de­fer, któ­re­go dzia­ła­nie po­le­ga na tym że opóź­nia on wy­wo­ła­nie skryp­tu do mo­men­tu za­ła­do­wa­nia ca­łej stro­ny. A więc de­fer na­le­ży ro­zu­mieć tak, że ga­le­ria ła­du­je się nie­za­leż­nie od stro­ny i je­śli jej ła­do­wa­nie się prze­dłu­ża, a stro­na (po­za ga­le­rią) jest go­to­wa do wy­świet­le­nia, to zo­sta­nie ona wy­świet­lo­na (z pu­stym po­lem w miej­scu ga­le­rii). Na­to­miast w sy­tua­cji od­wrot­nej (je­śli ga­le­ria za­ła­du­je się szyb­ciej od po­zo­sta­łej czę­ści stro­ny), to po­cze­ka ona na peł­ne za­ła­do­wa­nie stro­ny i wte­dy się uru­cho­mi. Peł­ny i dzia­ła­ją­cy kod stro­ny in­ter­ne­to­wej za­wie­ra­ją­cy ga­le­rię uru­cha­mia­ną w ten spo­sób wy­glą­dał­by na­stę­pu­ją­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 za­pi­sa­ny w pli­ku code_5.htm i moż­na go prze­te­sto­wać pod tym od­noś­ni­kiem.

In­ne moż­li­we roz­wią­za­nia, to np. ła­do­wa­nie ga­le­rii asyn­chro­nicz­nym ko­dem Java­Script umie­szczo­nym na koń­cu stro­ny (przed za­mknię­ciem <body>). Wte­dy bę­dzie­my mie­li pe­wność, że obiekt, w któ­rym ma się po­ja­wić ga­le­ria bę­dzie już ist­niał. Ta­ki kod wy­glą­dał­by na­stę­pu­ją­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>

Po­wyż­sze roz­wią­za­nie ma ta­ką za­le­tę, że ga­le­ria w ża­den spo­sób nie wpły­wa na opóź­nie­nie ła­do­wa­nia stro­ny. W roz­wią­za­niu z de­fer, mi­mo że ła­do­wa­nie od­by­wa się asyn­chro­nicz­nie, to je­dnak część prze­pu­sto­wo­ści łą­cza jest za­jmo­wa­na przez ga­le­rię. W ostat­nim roz­wią­za­niu ga­le­ria za­jmu­je prze­pu­sto­wość łą­cza do­pie­ro w mo­men­cie, gdy ca­ła stro­na jest już za­ła­do­wa­na i mo­że być wy­świet­lo­na. Użyt­ko­wnik mo­że już za­cząć prze­glą­dać stro­nę, a kie­dy ga­le­ria się za­ła­du­je – au­to­ma­tycz­nie się uru­cho­mi. Ten przy­kła­do­wy kod jest za­pi­sa­ny w pli­ku code_6.htm i tu jest do nie­go od­noś­nik.


  1. Uruchamianie galerii na żądanie   ^

Moż­na też nie uru­cha­miać ga­le­rii au­to­ma­tycz­nie pod­czas ła­do­wa­nia stro­ny, ale uru­cho­mić ją do­pie­ro wte­dy, kie­dy użyt­ko­wnik wy­ko­na ja­kąś ak­cję. Po­pa­trzmy na po­niż­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 ko­dzie, za­ła­do­wa­nie ga­le­rii spo­wo­du­je wy­ko­na­nie fun­kcji enab­le­Gal­le­ry, któ­ra uczu­li div-a (w któ­rym ma się zna­leźć ga­le­ria) na klik­nię­cie. Do­pie­ro je­go klik­nię­cie uak­ty­wni ga­le­rię. Po­wyż­szy kod (za­pi­sa­ny w pli­ku code_7.htm) moż­na prze­te­sto­wać na na­szym ser­we­rze.


  1. Ładowanie galerii na żądanie   ^

Kolejny przy­kład po­ka­zu­je, jak moż­na nie ła­do­wać ga­le­rii au­to­ma­tycz­nie (pod­czas ła­do­wa­nia stro­ny), ale za­ła­do­wać ją na żą­da­nie (po wy­ko­na­niu ja­kiejś ak­cji przez użyt­ko­wni­ka):

(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 ko­dzie klik­nię­cie w div-a znaj­du­ją­ce­go się nad na­pi­sem klik­nij mnie spo­wo­du­je wy­ko­na­nie fun­kcji load­And­Start­Gal­le­ry, któ­ra two­rzy dy­na­micz­nie obiekt ty­pu script, któ­ry ła­du­je ga­le­rią, a po jej za­ła­do­wa­niu au­to­ma­tycz­nie ją uru­cha­mia. Kod z tym przy­kła­dem jest za­pi­sa­ny w pli­ku code_8.htm i moż­na go prze­te­sto­wać kli­ka­jąc w ten od­noś­nik.


  1. Kilka galerii na jednej stronie   ^

W tym przykładzie pokazujemy, jak załadować i wy­świe­tlić na je­dnej stro­nie kil­ka ga­le­rii. Oczy­wiś­cie w ta­kim przy­pad­ku nie mu­si­my ła­do­wać ga­le­rii wie­lo­krot­nie. Wy­star­czy za­ła­do­wać ją raz, a po­tem utwo­rzyć kil­ka obiek­tów z te­go sa­me­go 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 fun­kcji startGallery() prze­ka­zu­je­my dwa pa­ra­me­try (tj. iden­ty­fi­ka­tor div-a oraz na­zwę pli­ku kon­fi­gu­ra­cyj­ne­go – po to, aby w każ­dej ga­le­rii wy­świe­tlić inne dane). Efe­kty tych dzia­łań za­pi­sa­no w pli­ku code_9.htm i moż­na je zo­ba­czyć kli­ka­jąc w ten od­noś­nik.
»
«

Our Services

Kombi logo
Virtual Gallery logo
3N STOCK PHOTOS logo
Kombi PDF Tools logo
K3D logo
Logo 3N Games