swah.net

index - xhtml - Jak na preload obrázků?

Twitter:

swah: O víkendu jsme byli na Karamazových a odcházel jsem z Aera nadšen. Přispěl k tomu i milý fakt, že se diváci začali zvedat až po titulcích. 18.08.
swah: Dnes se udál další velký milník v mé podnikatelské kariéře - pořídil jsem si frajerskou samolepící nástěnku. Jak asi dlouho bude samolepit. 14.08.
swah: Konečně se objevila alternativa pro synchronizaci záložek Firefoxu 3 vycházející dokonce z původního rozšíření viz http://jdem.cz/acbq5 12.08.

Jak na preload obrázků?

Nedávno jsem řešil menší problém díky těm krásným ikonkám, které vidíte v pravo nahoře. Nechtěl jsem, aby byli jen šedé, ale aby se při hoveru pěkně obarvili. Jelikož se mi nechtělo zasahovat do stylopisu a udělat to pomocí hoveru, vyřešil jsem to tolik to oblíbeným JavaScriptem. Ale to není teď důležité.

Takže o co jde?

Obrázkový hover se má správně řešit způsobem, jehož popis je na Pixyho WellStyledu. Ve zkratce jde jen o to, že posouváte pozadí obrázku - v obrázku máte všechny stavy, které potřebujete. Což je velice chytré v tom, že jakmile se obrázek (ve kterém jsou všechny stavy tlačítka, které potřebujete) jednou načte, už se nic načítat nemusí. Ale pokud máte dva obrázky, původní a hover, vzniká problém (ať to máte řešené přes JS nebo CSS) - obrázek se při hoveru začne načítat.

A teď jde o to, jak to vyřešit smajlik .

Chtělo by, aby byl obrázek načten ještě před tím, než se přes jeho první stav vůbec přejede. Když jsem hledal na internetu, našel jsem v různých diskuzí několik řešení. Všechna se zakládají na společném principu - obrázek, který chceme, aby byl přednačten (preloadován smajlik

), musíme někam do stránky šoupnout a skrýt. Není to zrovna nejelegantnější řešení, ale narazil jsem i na horší smajlik

. Holt kdo to chce mít eňoňuňo - použije CSS, kdo je ale línej zevlák jako já smajlik

, šoupne obrázek(obrázky) někam do stránky a skryje ho.

Jak?

Je to možné udělat udělat pomocí CSS a visibility např.

jenomže tím se obrázek stane jenom neviditelným a prázdné místo po něm zůstane, takže to je celkem nechtěné, když si představíte, že budete mít v hlavičce 20px mezeru. Takže by to šlo pomocí display a to např. takto

jenže to mi nejelo v Opeře. Opera je totiž tak "chytrá", že místo toho aby obrázek (resp. prvek) načetla a skryla, rovnou ho skryla aniž by ho načetla, čímž si teda ušetřila práci, ale nám je to spíše na škodu.

Takže přichází "mé" řešení

Mno mé - nikde sem o nenašel napsané smajlik

a přitom je to tak prosté. Obrázku se nastaví výška i šířka 1px a je to.

Je to teda hodně kostrbaté, ale co jsem zkoušel tak to zatím funguje všude.

Tak mi dyštak dejte vědět, jestli jste na to někde narazili, že bych si to zapatentoval smajlik , popř. jestli znáte elegantnější řešení (ne CSS)