Ladezeit verringern - Bilder

[Auge]

Hallo

Der code ist optimierbar, gerade in Hinsicht auf die JavaScript-Teile.

  
<div class="produkt">  
<a href="javascript:void(0)" onclick="javascript:toggleMe('produkt0')"> Produkt 1</a>  
<div class="produktdetails" id="produkt0">  
<img src="data/elitep.jpg" style="width:100%" border="0"></a>  
</div>  
</div>  

Da das <img>-Element im Dokument vorhanden ist, wird auch das referenzierte Bild gelanden. Das tut, wie ihm geheißen. Entweder, du benutzt kleinere Bilder, oder du fügst, wie Joachim schrieb, das Bild (mit seinem Container) erst auf Klick in das Dokument ein. Dann wird das Bild auch erst dann geladen.

Naja ich möchte alles auf einer Seite haben und nicht für jedes Produkt einen Link zu einer weiteren Seite erstellen.

Bei Joachims Variante bräuchtest du den Link für nicht JavaScript-fähige Browser. Du kannst die entsprechenden Links ja per JavaScript aus den DOM entfernen, so, wie du auf Klick die Bilder einfügst oder noch besser, du benutzt die bereits bestehende Struktur.

<a href="/pfad/zur/detailseite.html?produkt=1" onclick="[code lang=javascript]toggleMe('produkt0')"> Produkt 1</a>[/code]

Die Funktion toggleMe sollte jetzt das Element mit dem Bild erzeugen und false zurückgeben (return false;), damit der Link als solcher nicht ausgelöst wird. Funktioniert JavaScript nicht, wird einfach dem Link gefolgt.

Tschö, Auge