Es kommt öfter vor, dass Entwickler hochauflösende Fotos oder großformatige Bilder auf einer Website einbinden und dabei Nutzer mit langsamer Verbindung zum Internet außer Acht lassen. Abhilfe schaffen heißt jetzt die Devise.
Größe als Problem
Ist das implementierte Foto zu groß und zu schwer geraten, so braucht es seine Zeit, bis der Besucher das Bild in seiner tatsächlichen Größe angezeigt bekommt. Mit ein wenig Glück und eingeschaltetem Interlacing wird die Darstellung in Teilen nachgeladen, was dem Betrachter auf alle Fälle schon während des Ladevorgangs ein optisches Feedback überbringt. Im schlimmsten Fall ist die Ladeanzeige des Browsers der einzig zuverlässige Freund.
Kommunikation ist alles
Eine elegante und praktische Lösung wird zum Botschafter und soll dem Publikum vorm Display signalisieren, dass das Bild zwar noch nicht zu sehen ist, doch die Übertragung der Datei läuft parallel weiter. Dafür werden keine aufwändigen JavaScript-Bibliotheken oder Frameworks eingesetzt. Eine fein dosierte Portion CSS reißt die Aufgabe an sich.
Größe als Gewinn
Das Prinzip ist simpel, eine kleine und – vor allem – leichte Grafik (gerne als statischer Text oder drehende Sanduhr als Animation) wird im Bildbearbeitungsprogramm erstellt und im CSS-Einzeiler als Hintergrund verknüpft. Herunterzuladen im Netz als Activity Indicatos.
Beim Aufbau der Seite erscheint diese grafische Mitteilung – der Größe wegen – zuerst, überbringt die Botschaft „Bitte warten Sie, das Bild wird geladen“ und wird langsam vom allmählich nachgeladenen Foto überdeckt. Ein perfektes Zusammenspiel.
Beispiel zum Nachbauen:
<html>
<head>
<style type="text/css">
.diashow {
width: 500px;
height: 100px;
background: url(wait.gif) no-repeat center;
}
</style>
</head>
<body>
<div class="diashow">
<img src="my_picture.jpg" width="500" height="100" />
</div>
</body>
</html>
Empfehlung
Es ist klug, diese Technik in digitalen Fotoalben oder beim Darstellen der Webcam-Bilder einzusetzen. Der geduldige Besucher der Website bedankt sich.
