Ladezeit verringern - Bilder

[kAr]

Hallo Leute,
habe eine Art Liste (zumindest vom Aussehen her) erstellt.

Beispiel:
Produkt 1
Produkt 2
Produkt 3
Usw…

Wenn man nun auf Produkt 1 klickt öffnet sich zwischen Produkt 1 und Produkt 2 das Bild zu Produkt 1. Wenn man auf Produkt 2 klickt öffnet sich zwischen Produkt 2 und Produkt 3 das Bild zu Produkt 2 usw….

So weit so gut. Aber wenn man auf die Seite kommt, ladet er alle Bilder gleichzeitig!? Was bei mehreren Produkten ordentlich dauert...

Kann man die Bilder nicht auch erst per Mausklick auf das gewünschte Produkt/Link laden? Ich hatte mal was aber finde es leider nicht mehr ;(

(img lowsrc="" funkt ja nicht mit IE & Firefox?)

Code sieht abgespeckt(!) so aus:
[code lang=html
<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>
[/code]

Vielen Dank im Voraus ;p

[Haruzept]

Hi

Bau doch kleine Bilder ein und verlinke sie mit den großen. So ist die Seite schneller geladen. Benutz wenn es geht .png Dateien. Die sind kleiner als z.B. .jpg Dateien.

Gruß

Haruzept

[Der Martin]

Hallo,

Benutz wenn es geht .png Dateien. Die sind kleiner als z.B. .jpg Dateien.

wer sagt denn sowas?
Bedenke, das JPEG und PNG zwei ganz unterschiedliche Verfahren verwenden. PNG komprimiert verlustfrei, JPEG verlustbehaftet, wobei man den Kompromiss zwischen Kompression und Bildqualität steuern kann.

Bei Bildern, die den Charakter von Fotografien haben, erzeugt JPEG selbst bei recht hoher Qualität deutlich kleinere Dateien, und wenn man bereit ist, die Qualitätsansprüche weit genug herunterzuschrauben, kriegt man sie immer noch ein bissl kleiner.
Für Bilder mit wenigen Farbtönen und scharfen Konturen ist PNG aber besser geeignet, weil es diese Bildeigenschaften besser wiedergeben kann. JPEG erzeugt an scharfen Farbübergängen immer mehr oder weniger deutliche Artefakte, die Kanten wirken unscharf oder ausgefranst; PNG bildet diese Kanten scharf und sauber ab.

Bezüglich der Dateigröße ist PNG aber meistens schlechter (größere Datei) als JPEG.

So long,
 Martin

[Haruzept]

Hallo Martin!

Dank dir! Wieder etwas schlauer geworden. Man gut das ich das mit gfx gelassen habe xD

Gruß

Haruzept

[Gunnar Bittersmann]

@@Haruzept:

nuqneH

Dank dir! Wieder etwas schlauer geworden.

Willste noch schlauer werden: [GIF-JPEG, GRAFIKFORMAT]

Qapla'

[Bobby]

Moin

Ich würde dir für dein Problem Lightbox 2 empfehlen.

Gruß Bobby

[kAr]

Danke ;p

Hatte ich schonmal probiert aber das funkte mit IE oder Firfox (also einer von beiden) nicht. Der schwarze Hintergrund war dann nur auf der halben Seite zu sehen...

[Bobby]

Moin

Hatte ich schonmal probiert aber das funkte mit IE oder Firfox (also einer von beiden) nicht. Der schwarze Hintergrund war dann nur auf der halben Seite zu sehen...

Das musst du dann entsprechend anpassen. Also ich habe nur gute Erfahrung mit dem  Script. Ich würdes an deiner Stelle nochmal probieren.

Gruß Bobby

[Joachim]

Hi,

So weit so gut. Aber wenn man auf die Seite kommt, ladet er alle Bilder gleichzeitig!?

Du könntest das Bild erst beim Klick z.B. per Dom in den gewünschten Knoten hängen. Nachteil: geht nur per js, möglicherweise wäre also ein Alternativlink angebracht.

Gruesse, Joachim

[kAr]

Danke für die rasche Rückmeldung.

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

Gibts eine anleitung für des JS? Ich fende in google nichts brauchbares..

[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

[kAr]

Hey, danke!

Wäre es nicht auch möglich zu sagen, dass man erst den Seiteninhalt läd und dann das Bildmateriel?

[suit]

Hey, danke!

Wäre es nicht auch möglich zu sagen, dass man erst den Seiteninhalt läd und dann das Bildmateriel?

Nein - wie und in welcher Reihenfolge die Inhalte geladen werden kannst du als Autor der Seite nicht bestimmen.

Normalerweise wird der DOM-Baum von "oben nach unten" und von "außen nach innen" geladen - sprich alles was später (oder weiter innen) in deiner Struktur kommt, wird auch später gelesen.

Allerdings Führen die Browser gerne auch mehrere Requests parallel aus, laden unsichtbare Ressourcen garnicht oder ähnliches.

Während z.B. beim ersten Bild im Quelltext noch auf auf eine Antwort vom Server gewartet wird, werden die folgenden bereits angezeigt, weil diese im Cache liegen oder der Server schneller reagiert hat.

Die beste Möglichkeit ist immer noch die bereits beschriebene: das Bild on-Demand per JavaScript ins DOM hängen und für JavaScript-Lose einfach verlinken (etwa 5 % "deiner" Benutzer).

Es gibt aber noch weitere Alternativen:
Du bindest alle Bilder am "Ende" deines Dokuments ein - kurz vor dem schließenden body-Element und blendest sie per CSS aus. Danach kannst du sie bei klick per JavaScript einblenden.

Allerdings wird auch hier nicht garantiert, dass das Bild vom Browser überhaupt geladen wird, wenn es nicht sichbar ist.

Wenn sie aber geladen werden, ist die Last auf deinen Server enorm da immer alle Bilder geladen werden müssen - ungleich ob sich der benutzer jetzt keins oder alle 25 Bilder anschaut.

Darum: die genannte Methode mit dem "ins DOM einhängen" benutzen - Lightboxen gibts massenhaft. Tendentiell kann man highslide empfehlen - für den kommenziellen Einsatz kostet es ein paar Dollar - die Features überzeugen aber durchaus.

Ansonsten gibts natürlich noch einen Haufen gratislightboxen.

[Detlef G.]

Hallo suit

Es gibt aber noch weitere Alternativen:
Du bindest alle Bilder am "Ende" deines Dokuments ein - kurz vor dem schließenden body-Element und blendest sie per CSS aus. Danach kannst du sie bei klick per JavaScript einblenden.

Allerdings wird auch hier nicht garantiert, dass das Bild vom Browser überhaupt geladen wird, wenn es nicht sichbar ist.

Je nach Hintergrund sind auch Grafiken mit 1 x 1 Pixel so gut wie unsichtbar, und sie dürften von jedem Browser geladen werden (außer von reinen Textbrowsern).

Auf Wiederlesen
Detlef

[suit]

Je nach Hintergrund sind auch Grafiken mit 1 x 1 Pixel so gut wie unsichtbar, und sie dürften von jedem Browser geladen werden (außer von reinen Textbrowsern).

Sicher - aber warum soll ich wie gesagt 50 Grafiken einer Galerie in voller Bildqualität laden (und das bei jedem Benutzer) wenn ich doch garnicht weiß, ob er überhaupt eins davon in voller größe sehen will?

Man denke an Mobilgeräte - bei den meisten Mobiltarifen kostet das "erste GB" rund 10 Euro (oder man bekommt 2 für 20 oder 3 für 30 Euro) und alles was darüber geht, kostet dann massig Geld.

50 Grafiken je 1 MB - sind etwa 2% des monatlichen Datenvolumens - und das beim Besuch nur einer einzelnen Unterseite? Prost Mahlzeit.

[Detlef G.]

Hallo suit

Sicher - aber warum soll ich wie gesagt 50 Grafiken einer Galerie in voller Bildqualität laden (und das bei jedem Benutzer) wenn ich doch garnicht weiß, ob er überhaupt eins davon in voller größe sehen will?

Der Vorschlag stammte von dir. Ich habe nur darauf hingewiesen, dass ein Verstecken mittels CSS meist nicht nötig wäre.

Und, ich bin kein Freund davon Grafiken vorzuladen, bei denen ich nicht relativ sicher sein kann, dass sie wirklich kurzfristig benötigt werden.

Auf Wiederlesen
Detlef