Es kommt immer wieder vor, dass man auf eigener Website hochauflösende Fotos oder großformatige Bilder einbindet und dabei die User vergisst, die über eine “langsame” Internetverbindung verfügen. Für diesen Fall wird nachfolgend eine einfache aber elegante Lösung aufgezeigt.
Niemand wartet gern
Bei Internetnutzern mit “langsamer” Verbindung kann es vorkommen, dass eine Grafik je nach Größe erst nach wenigen Sekunden oder sogar Minuten angezeigt wird. Informieren heißt die Devise!
Es gibt eine elegante und praktische Lösung dem Besucher mitzuteilen, dass das Foto zwar noch nicht zu sehen ist, jedoch geladen wird.
Einfacher Trick
| Erstellen Sie mittig und gut lesbar eine möglichst „leichte“ GIF-Grafik, deren Dateigröße 1 kB nicht überschreiten sollte, mit dem Schriftzug “Das Foto wird geladen. Bitte warten Sie…”, wobei die Breite und Höhe dem Foto identisch sein soll, um Kacheleffekt zu vermeiden. Das erstellte GIF wird dann wortwörtlich hinter dem Foto gelegt: |  Beispiel |
<table>
<tr><td background=”/images/hintergrund.gif”><img src=”/images/foto.jpg” width=”800″ height=”500″ border=”0″></td></tr>
</table>
Die viel leichtere Grafik im Hintergrund erscheint zuerst, überbringt die Botschaft an den User und wird langsam vom nachgeladenen Foto überdeckt.
Besonders zu empfehlen ist diese Anwendung für digitale Fotogalerien und für das Einbinden von Webcam-Bilder.
Lange Ladezeiten vermeiden
Generell sollte man jedoch aus genannten Gründen lange Ladezeiten vermeiden, da Internetsurfer es oft eilig haben und nicht gern auf unbekanntes warten möchten. Immerhin ist Zeit auch Geld. Also setzen Sie nur “schwere” Grafiken ein, wenn der Zweck diese rechtfertigt.
Diese Artikel könnten Sie interessieren:
HTML-Einführung
(Gast | 30.09.02)
Hallo,
diese Möglichkeit eines Bild-Preloaders habe ich bisher noch gar nicht gedacht. Ich bin jedoch froh, eine solche Möglichkeit im Hinterkopf zu wissen.
Es macht nämlich – vor allem für Nutzer, die diesen Trick nicht kennen – auch noch einen guten Eindruck. In technischer Hinsicht meine ich.
Auch unerfahrene Webmaster (wie ich wohl bisher auch einer war ;D) können von einer solchen Möglichkeit beeindruckt sein.
Vielen Dank für diesen Artikel!
Jonas
Es muss nicht immer kompliziert sein, es geht öfters auch ganz easy: ohne Javascript und ohne Flash – reines HTML. Keep it simple und gern geschehen!
Coole Sache – hab ich gleich ausprobiert, aber: Von der “leichten” Grafik bleibt immer ein kleiner Rand um das eigentliche Bild – was ist da zu tun? Einfach einen etwas kleineren Positionsrahmen angeben oder statt eines GIFs ein JPG benutzen hat noch nicht geholfen.
Danke, Micha (www.freduard.de)
Hallo Michel.
Kann das sein, dass die GIF-Grafik wenig größer ist als das eigentliche Bild? Wenn eine Grafik die andere *komplett* überdeckt, dann soll eigentlich kein Rand zu sehen sein. Und das passiert nur dann, wenn die Grafiken identische Breite und Höhe haben…
Hey, hier nochmal Michel. Leider klappt das immer noch nicht so, wie es sollte… hab mal eine kleine Testseite gemacht mit Originalquellcode, den ich selbst benutze – kannste da mal drüner schauen bitte? Die Testseite ist die hier:
http://webspace.freduard.de/oo.html
Danke, Michel
Die “Border” des Bildes muss auf 0 gesetzt werden. Also:
<img src=”meinbild.gif” border=”0″>
Dann sollte es funktionieren, ohne dass ein Rand entsteht. ;-)
Ich denke, ich habs: Stell bitte bei dem Foto “border” auf Null, also border=”0″. Dann solls gehen…
Was für ein Zufall, Chris. Ich bestehe auf eine Sekundenanzeige bei den Postings :)
Letzte Änderung von Sergej Müller am 05.10.02, 19:32.
Hey, Ihr seid ja gleich schnell…. habe jetzt auch den neuen Vorschlag ausprobiert und zur Ansicht noch Opera und Netscape 7 benutzt, aber ’s hilft alles nix…. ;( hab die Testseite aktualisiert, schaut’s Euch an… aber danke schon mal…
Aha, dann liegt es 100% an dem table-Tag. Bitte so ändern:
<table cellspacing=0 cellpadding=0 border=0>
Cool – Ihr habt’s geschafft!
Danke für die viele Mühe, green greetings, Micha
Vor allem finde ich einen solchen Preloader teils leichter zu erstellen als einen Flashpreloader.
Selbstverständlich ist ein FlashPreloader flexibler.
Allerdings variiert der Code sehr stark, je nachdem, was man genau einbaut.
Hier ist das nicht der Fall.
Jonas
Mir gefällt die Idee mit dem Image-Preloader auch sehr gut. Einfach aber genial! (L)
Das freut aber den “Erfinder”, dass seine “weltbewegende Erfindung” für hilfreich und genial befunden wird ;) *übetreib*
Ich denke der klare Vorteil gegenüber Flash ist die Kompatibilität. Viele Leute mögen Flash nicht und haben es im Browser deaktiviert (so wie ich ;-)) oder besitzen gar kein entsprechendes Plug-In.
Hi CBS,
allerdings ist es so, dass eigentlich auf jeder Site, die Flash einsetzt, der Download des flashplayers angeboten wird, wenn man keinen hat.
Von daher denke ich, dass viele nach einiger Zeit dem Download-Aufruf zustimmen werden.
Oder wie kommen sonst so viele Downloads zusammen?
Jonas
Ich denke auch, dass viele den Flash-Player haben. Aber es gibt auch einige, die dieses Plugin abgestellt haben.
Lohnt sich der Einsatz von Flash in diesem Fall? Ich denke nicht!
Meine Meinung zu Flash sollte bekannt sein. Ich würde nie einen User zwingen sich für einen Preloader Flash herunterladen oder aktivieren zu müssen!
Flash ist mächtig, aber der Zweck sollte nicht alle Mittel heiligen. ;-)
ich unterstütze dich, chris. man könnte den preloader auch mit javascript basteln – das ist aber nicht sinn der sache. die grundidee war: den user im hintergrund mit information zu versorgen ohne dabei nach plug-ins [die im browser nicht installiert werden können] und javascript [was im browser deaktiviert werden kann] zu greifen.
warum kopliziert, wenn es auch einfach geht – und vor allem 100% auf allen browsern und systemen…
Preloader mit JavaScript?
Das würde mich interessieren.
Denn das kenne ich auch nicht …
Könntest du dazu ein Beispielscript schreiben?
Jonas
ich verweise mal auf google, da ich selbst bis jetzt noch kein preload-script gecodet habe: http://www.google.de/search?hl=de&ie=UTF-8&oe=UTF-8&q=preload+javascript&btnG=Google-Suche&meta=lr%3Dlang_de