Kuvien esilataus CSS:llä vai JavaScriptillä?
28.11.2005 klo 23.45 • Aihe: Web
Muuten niin kiinnostavien kuvagallerioiden ongelmana on usein hitaus: kuvien latautuminen kestää tuskallisen kauan, varsinkin jos ne ovat hyvälaatuisia. Windowsin kuvankatseluohjelmassa ongelmaan on tuotu helpotusta kuvien esilatauksella: sarjassa seuraavan kuvan lataaminen aloitetaan heti kun katseltava kuva on latautunut. Miten saman voisi toteuttaa verkossa?
Ratkaisuksi on ehdotettu esiladattavien kuvien piilottamista display: none -ominaisuudella, olettaen että piilotetut kuvat latautuvat selaimen välimuistiin. Jotta gallerian käyttö olisi sujuvaa, katseltavan sivun pitäisi kuitenkin latautua loppuun asti kuvineen kaikkineen, ennen kuin seuraavan kuvan esilataus aloitetaan. Muuten esilataus olisi paremminkin häiritsevää kuin kuvien katselua helpottavaa.
Toimivuus käytännössä
Testasin millainen vaikutus kuvien piilottamisella erilaisilla CSS-menetelmillä on niiden latautumiseen eri selaimilla (Firefox 1.0.7, IE 6.0 ja Opera 8.5). Tuloksena oli, että CSS:aa ei voi käyttää galleriakuvien esilataamiseen. Selaimet joko latasivat piilotetun kuvan yhtä aikaa varsinaisen kuvan kanssa hidastaen näin sen latautumista, tai jättivät piilotetun kuvan kokonaan lataamatta.
Eri menetelmien vaikutukset selaimittain Windows XP:lla.
| Menetelmä | Firefox 1.0.7 | IE 6.0 | Opera 8.50 |
|---|---|---|---|
| Taustakuva (div-elementin) | yhtä aikaa | yhtä aikaa | yhtä aikaa |
| Kuva sivun lopussa (img-elementtinä) | yhtä aikaa | yhtä aikaa | yhtä aikaa |
| Taustakuva, display: none | ei lataa | yhtä aikaa | ei lataa |
| Kuva sivun lopussa, display: none | yhtä aikaa | yhtä aikaa | ei lataa |
| Taustakuva, visibility: hidden | yhtä aikaa | yhtä aikaa | yhtä aikaa |
| Kuva sivun lopussa, visibility: hidden | yhtä aikaa | yhtä aikaa | yhtä aikaa |
Piilotettujen kuvien (ja muun piilotetun sisällön) latautuminen kannattaa ottaa huomioon myös muussa www-suunnittelussa.
Javascipt-toteutus
Jäljelle jää siis Javascript-toteutus. Kun skriptin toiminta käynnistetään onload-määreellä, esilataus alkaa vasta kun katseltava sivu on kokonaan latautunut:
<body class="pic" onload="preloadImage('KUVA-URL')">
Seuraava skripti toimii kaikissa em. selaimissa ongelmitta:
<!--
// Image preload by Mikko Heikkinen/biomi.org
// based on code by eLouai
// <http://elouai.com/javascript-preload-images.php>
function preloadImage(imageURL) {
if (document.images) {
image = new Image();
image.src=imageURL;
}
}
//-->
Käytännön toteutus on nähtävissä uudessa Suurpelto-galleriassani.
Javascript-toteutuksen ongelmana on että se ei toimi pienellä osalla käyttäjistä. Kuvagalleriassa tämä ei kuitenkaan ole merkittävä haitta koska kuvat joka tapauksessa ladataan normaalisti img-tagilla. Javascriptista on hyötyä suurimmalle osalle käyttäjistä, mutta ei haittaa kenellekään.
Rollover-menetelmä
Entä kuvien kokoaminen yhdeksi tiedostoksi kuten hyväksi todetussa rollover-menetelmässä? Yksittäiset kuvat voitaisiin koota yhdeksi tiedostoksi, jossa kuvat ovat päällekkäin ensimmäinen kuva ylimpänä, toinen kuva sen alla ja niin edelleen. Kuvatiedosto sijoitettaisiin sitten absoluuttisesti (position: absolute) div-elementin sisälle, näytettävä kohta valittaisiin sijoittamalla kuvatiedosto top-ominaisuudella ja loppuosa kuvasta piilotettaisiin overflow: hidden; ominaisuudella.
Tämä toimii em. selaimissa, mutta toisi ainakin kaksi uutta ongelmaa:
- Homma toimii vain jos käyttäjä katsoo kuvat ennalta määritetyssä järjestyksessä. Jos käyttäjä esimerkiksi hyppää suoraan kuvaan numero kymmenen, täytyy hänen odottaa yhdeksän sitä edeltävän kuvan latautumista ennen kuin haluttu kuva tulee näkyviin.
- Jos kuvan ympärille halutaan tehdä kehys CSS:lla, kaikkien kuvien täytyy olla samanmuotoisia (ei siis pysty- ja vaakakuvia samaan galleriaan).
Kommentit
1 Emil Virkki (29.11.2005 klo 15.45)
Entä jos kuvan laittaisi jomman kumman linkin hover-taustakuvaksi?
2 Mikko (29.11.2005 klo 20.32)
Ei näytä toimivan. Jos kuvaa käytetään pelkästään hover-pseudoluokan taustakuvana, kaikki kolme selainta aloittavat sen lataamisen vasta kun linkkiä kosketaan hiirellä.
Jos kuva taas on myös link/visited-pseudoluokan taustakuvana, se ladataan yhtä aikaa pääsisällön kanssa.
Näyttää siis että CSS:llä ei voi vaikuttaa kuvien latausjärjestykseen.
Kuvan voisi ehkä sijoittaa jonkin muun elementin hover-taustakuvaksi (sellaisen jota varmemmin kosketaan hiirellä, esim. body), mutta ainakaan IE:llä tämä ei toimisi.
Tätä viestiä ei voi enää kommentoida.