Preloading ist eine beliebte Technik für wechselnde Hintergrundbilder. Doch braucht man dafür kein JavaScript oder gar PHP-Code. Mit CSS lassen sich Hintergrundbilder ganz einfach vorladen, wenn man folgenden CSS-Stil einheitlich einhält:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | a { background-image: url('hover_on.png'); } a:link, a:visited { background-image: url('hover_off.png'); } a:hover, a:focus { background-image: url('hover_on.png'); } |
Durch die Hintergrundbild-Definition im a-Tag wird das hover-Bild schon vorgeladen, was aber durch die Definition a:link für den Benutzer nicht sichtbar wird. So kann man gezielt, einfach und browser-kompatibel die wechselnden Bilder im Voraus laden.