Responsive Webdesign – Grundlagen

Unterschiedliche Hintergrundbilder laden

Testen Sie unsere 1928 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Nicht immer sollen dieselben Bilder bei kleinem und großem Viewport angezeigt werden. Wie das bei Hintergrundbildern am besten funktioniert, verrät dieser Film.

Transkript

Nicht immer sollen die selben Bilder bei kleinem und bei großem Viewport angezeigt werden. Wie sich das bei Hintergrundbildern am besten bewerkstelligen lässt, schauen wir uns hier an. Erst einmal vorweg auch etwas, was nicht funktioniert. Ich bin hier auf der Seite von Tim Kadlec, der dazu ausführliche Untersuchungen durchgeführt hat. Und der hat getestet unter welchen Bedingungen Bilder geladen werden und nicht. Was natürlich wichtig ist, ist beispielsweise, wenn Sie verschiedene Bilder laden wollen für kleine und für große Viewports, dass dann nicht der Fall ist, dass bei kleinen Viewports auch die Bilder, die für die großen Viewports gedacht sind, geladen werden. Weil das wäre natürlich besonders blöd, weil die sind auf kleinen Viewports gar nicht benötigt. Sie brauchen aber dann natürlich trotzdem Ladezeit. Also, erstens was zu diesem Zweck überhaupt nicht funktioniert, ist die Eigenschaft display: none. Also, wenn Sie ein Bild ganz normal in Ihrem HTML-Code einbinden und dann innerhalb von Media Queries display: none angeben, dann werden die Bilder trotzdem geladen. Also, das Rote heißt immer: Achtung! Achtung, die werden geladen. Ebenfalls funktioniert es nicht, Browser übergreifen zuverlässig, wenn Sie das mit einem Hintergrundbild machen und dann das auch auf display: none schalten. Das Element, das funktioniert auch nicht. Dann gibt es schon einen Fall, der ein bisschen kompliziert ist. Und besser funktioniert es beim übergeordneten Element. Aber jetzt wollen wir zum einfachen Fall, der eigentlich ganz gut funktioniert. Also, erstmal der Vorfall, das ist dieser hier, wo wir ein Hintergrundbild angeben und über Media Queries das durch ein anderes ersetzen. Da sehen Sie, dass es so ein bisschen durchwachsen, auch noch nicht so richtig gut. Und hier es jetzt das, was richtig gut funktioniert. Das heißt, dass Sie die Angaben zu den Hintergrundbildern innerhalb von Media Queries machen. Und dann ist es auch wirklich so, dass in den wichtigsten Browsern und den meisten Browsern nur das Bild geladen wird, was auch wirklich für das System auch gedacht ist. Also, Hintergrundbilder, wenn die nur für einen bestimmten Viewport zur Verfügung stellen wollen, dann schreiben Sie die Angaben unbedingt innerhalb von Media Queries durch die, die das sicherstellen. Ich habe hier ein kleines Beispiel, durch das ich auch mal vorführe hier. Habe ich jetzt bei Body keine Angabe zu einem Hintergrundbild. Hingegen sage ich das: ab einer Breite... Also, bei einer Mindestbreite von 500 Pixel dann soll das Hintergrundbild geladen werden. Und das heißt, bei Viewports, die kleiner sind als diese 500 Pixel, wird das Bild nicht geladen. Also, wenn wir uns das hier einmal ansehen. Haben wir es jetzt im großen Viewport. Das Bild ist da und wird geladen. Beim kleinen Viewport würde es nicht geladen werden. Das ist also wirklich eine gute Möglichkeit. Fazit: passen Sie auf mit display: none. Das hat prinzipiell nicht den gewünschten Effekt auf den Ladevorgang. Also, Elemente mit display: none werden trotzdem geladen. Was bei Hintergrundbildern hingegen gut funktioniert, ist den entsprechenden Befehl nur innerhalb von Media Queries anzugeben.

Responsive Webdesign – Grundlagen

Lernen Sie die Hintergründe von Responsive Webdesign kennen und sehen Sie, wie sich über diese Technik Webinhalte auf den unterschiedlichsten Geräten gleichwertig anzeigen lassen.

5 Std. 47 min (59 Videos)
Derzeit sind keine Feedbacks vorhanden...
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!