Preload obrázku
Někdy potřebujete, aby se vám obrázky načetly do zásoby. Prostě aby se nezačal obrázek načítat až ve chvíli, kdy je to potřeba, ale už předem. Nejčastěji se to hodí u záměny obrázkového odkazu při přejetí myší.
Dejme tomu, že budu chtít, aby se mi "do zásoby" načetl obrázek jménem obrazek.gif. Dá se to udělat například tímto zápisem:
<script>
promenna = new Image();
promenna.src = "obrazek.gif";
</script>
Když potom nějakým jiným skriptem budu chtít použít soubor obrazek.gif, prohlížeč už jej bude mít načtený.
Příklad záměny obrázku při přejetí myší
Mám normálně obrázek v odkazu, ještě bez efektu:
<a href="odkaz.html"><img src="prvni.gif"></a>
a přidám tam akci, že se má při přejetí myší změnit zdroj obrázku. Akce je to onmouseover:
<a href="odkaz.html"><img src="prvni.gif" onmouseover="this.src='druhy.gif'"></a>
Objekt this je daný tag, v tomto případě img (obrázek). A this.src je zdoj toho obrázku. Když změním this.src, tak se začne načítat obrázek druhy.gif. Věnujte pozornost též těm apostrofům (uvozovky v uvozovkách použít nelze).
Fajn, bude to fachat, ale bude to pomalé. Obrázek druhy.gif se začne načítat až při přejetí myší a chvíli to trvá, takže to nevypadá hezky. Čili nastoupí ten preload:
<script>
promenna = new Image();
promenna.src = "druhy.gif";
</script>
<a href="odkaz.html"><img src="prvni.gif" onmouseover="this.src='druhy.gif'"></a>
nebo využiji toho, že to src už mám v proměnné promenna.src:
<a href="odkaz.html"><img src="prvni.gif" onmouseover="this.src=promenna.src"></a>
Pro doplnění funkčnosti se ještě vyžaduje, aby se při odjetí myši obrázek vrátil na původní vzhled:
<a href="odkaz.html"><img src="prvni.gif" onmouseover="this.src='druhy.gif'" onmouseout="this.src='prvni.gif'"></a>
Jiný způsob preloadu
Vlastně by mělo stačit ten druhý obrázek dát někam do dokumentu, aby se začal sám načítat. Dát ho třeba na konec dokumentu a skrýt ho pomocí stylu visibility:hidden:
<img src="druhy.gif" style="visibility: hidden">
Povede to ke stejnému efektu, akorát je to takové méně čisté. Možná vám také vrtá hlavou, proč raději nepoužiji display: none. Je to kvůli Opeře. Jakmile vidí u obrázku display: none, nenačítá ho (narozdíl od ostatních prohlížečů).
Reklama
