Surface bietet die Möglichkeit, Bilder erst dann zu laden, wenn Sie auch tatsächlich angeschaut werden. Dies kann unter Umständen die Ladezeit verringern, außerdem erscheinen die Bilder mit einem netten Effekt. Ein Beispiel findet sich auch hier unter
http://demo.blechdose-live.de/
Wichtig: Machen Sie davor unbedingt ein Backup, da das Template danach nicht mehr richtig laufen könnte und lesen Sie sich lieber erst das gesamte How-to durch bevor Sie beginnen!
Was Sie dazu benötigen;
Joomla 2.5
Surface Beta
1.) Als erstes müssen Sie die dazugehörige Option im Backend von Surface aktivieren. Diese ist standardmäßig deaktiviert.
(Click to enlarge)
2.) Ist dies erledigt, müssen Sie die gewünschten Bilder, die animiert geladen werden sollen auswählen. Dafür gehen Sie in Joomla in einen Beitrag mit Bildern. Wechseln Sie dann in den HTML-Editor und suchen Sie hier ihr Bild. Sie müssten so etwas in der Art finden:
| Code: |
<img src="images/joomla_green.gif" border="0" alt="" />
|
Dies ändern Sie zu folgendem ab:
| Code: |
<img src="templates/surface/images/
placeholder.png" border="0" alt="" data-original="joomla_green.gif" /
>
|
Wichtig hierbei zu beachten ist, dass das src-Attribut nun nur einen Platzhalter anzeigt, dieser wird mit Surface mitgeliefert. Das neue data-orginal-Attribut ist somit ihr eigentliches Bild, solange dieses aber nicht angeschaut wird, wird der Platzhalter geladen.
3.) Speichern Sie alles und schauen Sie sich das Resultat im Frontend an. Sie können dies so oft wiederholen wie Sie wollen.
