Jedním z velkých důvodů pro použití předběžného načítání obrázků je, pokud chcete použít obrázek pro obrázek na pozadí prvku na události mouseOver nebo: hover. Pokud použijete tento obrázek na pozadí v CSS pouze pro stav: hover, tento obrázek se nenačte až do první události: hover, a proto bude mezi myší procházet touto oblastí a skutečně zobrazeným obrázkem krátké nepříjemné zpoždění. .
Technika č. 1
Načtěte obrázek do normálního stavu prvku, pouze jej posuňte pryč s pozicí na pozadí. Poté přesuňte pozici pozadí a zobrazte ji při najetí myší.
#grass ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background-position: bottom left; )Technika č. 2
Pokud má daný prvek již použit obrázek na pozadí a potřebujete tento obrázek změnit, výše uvedené nebude fungovat. Typicky byste zde hledali sprite (kombinovaný obrázek na pozadí) a pouze posunuli pozici pozadí. Pokud to ale není možné, zkuste to. Použít obrázek na pozadí na jiný prvek stránky, který se již používá, ale nemá obrázek na pozadí.
#random-unsuspecting-element ( background: url(images/grass.png.webp) no-repeat -9999px -9999px; ) #grass:hover ( background: url(images/grass.png.webp) no-repeat; )Myšlenka vytvořit nové prvky stránky, která se použije pro tuto techniku předběžného načítání, se vám může naskytnout, například # preload-001, # preload-002, ale to je spíše proti duchu webových standardů. Proto použití prvků stránky, které již na vaší stránce existují.
Napadlo mě pokusit se použít stejný prvek, pouze použít: po třídě pseduo k načtení obrázku, takže jste se nemuseli spoléhat na to, že na vaší stránce bude dostatek cizích obrázků bez pozadí, se kterými můžete pracovat, ale z jakéhokoli důvodu je nechtěl správně načíst.
Více
V tomto článku najdete další techniky, včetně JavaScriptu.