StartseiteWebTipps & Tricks

Images vorladen

26. JULI 2011
von Jörg
Web - Tipps & Tricks

Da bei einem Link ein Bild welches bei einem Hovereffekt benötigt wird, erst dann vom Server in den Browsercache geladen wird wenn der Effekt stattfindet und es dadurch zu einer unschönen Verzögerung bei der Darstellung kommt, ist es ratsam diese "Hoverbilder" in den Cache vorzuladen.

Vorladen der Grafiken mit HTML

Hier wird die Grafik für die MouseOver-Aktion einfach in einem img-Tag Breite/Höhe 1x1 auf der Seite platziert. Somit wird die Grafik in den Cache geladen und beim eigentlichen Link gibt es beim Hovereffekt keine Verzögerung.
html:
01
<img src="link_hover.jpg" width="1" height="1" alt="" />
Ich finde das dies eine ziemlich unschöne Lösung ist, da ein Pixel dann falsch dargestellt werden könnte, eben der Pixel vom img-Tag. Deshalb würde ich die CSS-Lösung vorziehen.

Vorladen der Grafiken mit CSS

Bei dieser Lösung wird die Grafik zwar noch in einem img-Tag geladen, aber diese Tag wird per CSS mit display:none; versteckt.
html:
01
<img class="hidepics" src="link_hover.jpg" alt="" />
css:
01
02
03
04
05
.hidepics {
  width:0px;
  height:0px;
  display:none;
}
Somit kann man auch Bilder für die nächste Seite vorladen, vorausgesetzt die Verweildauer auf der Seite ist demensprechend groß.

Zwei Bilder in einem (Vorladen nicht nötig)

Ganz ausgefuchst ist es natürlich die Grafiken für den Link und dem Hovereffekt zu einer zu vereinen und bei a:hover das Bild dementsprechend zu verschieben.

link.jpg:
2 Bilder in einem für einem Link

html:
01
<a class="in" href="#">Link</a>
css:
01
02
03
04
05
06
07
08
a.in, a:link.in, a:visited.in {
	background: url(link.jpg) no-repeat left top;	
	padding-left: 17px;
}
a:hover.in, a:active.in {
	background: url(link.jpg) no-repeat left bottom;
	padding-left: 17px;
}
Demo: Link

Kommentare:

Thinking like that is really imvesrsipe

von Lidia am 02. JANUAR 2015 um 13:48 Uhr » http://jwiextkf.com

Hinterlasse einen Kommentar

Ein Frosch der sich an der Seite festhält