Matthias Apsel: nicht benötigte Ressourcen im CSS

Om nah hoo pez nyeetz, alle!

Wie gehen die Browser mit nicht benötigten Ressourcen im CSS um? Bzw. mit welchen Werkzeug kann ich das Verhalten der Browser prüfen?

Hintergrund:

Es gibt die Idee, Bilder für noch nicht geöffnete Seiten des Angebots vorzuladen.

#1# <div id="preload">       <img src....

und diese per CSS unsichtbar machen, hat den Nachteil, dass Hintergrundgrafiken erst nach den ganzen unsichtbaren Bildern geladen werden.

#2# im CCS #preload {background-image ..., display: none;}

Im FF werden die Grafiken dann in den Cache geladen. Auch wenn im CSS-Code zuerst display: none steht.

bei #nicht_existierende_id wird das Hintergrundbild nicht in den FF-Cache geladen.

Wie kann ich das Verhalten der anderen Browser prüfen?

Wie sinnvoll ist das?

Man lädt zwar die Grafiken auch bei ausgeschaltetem JS vor, hat aber zusätzliche Elemente im Markup.

Matthias

--
Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
  1. Hi,

    Wie kann ich das Verhalten der anderen Browser prüfen?

    Wie sinnvoll ist das?

    http://www.google.com/search?q=image+preload+css+display+visible
    Da dürftest du das Thema schon an einigen Stellen aus mehreren Blickwinkeln betrachtet finden.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Om nah hoo pez nyeetz, ChrisB!

      Da dürftest du das Thema schon an einigen Stellen aus mehreren Blickwinkeln betrachtet finden.

      ich find da meist nur die technische Seite und da auch überwiegend Variante #1#, die ich nur verwenden würde, wenn keine Hintergrundgrafiken benötigt werden.

      Mich interessiert vor allem, wie sinnvoll das ist. Ich stelle mal so ein paar Gedanken in den Raum:

      • Preload ausschließlich mit JS, Leute ohne JS haben halt etwas weniger Comfort.
      • Preload überhaupt nicht
      • Ich erzeuge für alle (evtl. außer denen, die das Anzeigen der Bilder deaktiviert haben) ggf. überflüssigen Trafik

      Das Problem der zusätzlichen Elemente im Markup ließe sich zum Beispiel mit multiplen Hintergrundbildern von body::before umgehen.

      Matthias

      --
      Wer ein Problem beschreiben kann, hat es schon halb gelöst.                                             (Julian Huxley) http://www.billiger-im-urlaub.de/kreis_sw.gif
        • Preload ausschließlich mit JS, Leute ohne JS haben halt etwas weniger Comfort.

        Wenn die Bilder ohnehin nur für Dinge gebraucht werden die per JavaScript nachgeladen werden, ist JavaScript eine gute Wahl.

        Ich hab' z.B. einen Fader im Einsatz der aus einer XML-Ressource Bildinformationen bezieht, dafür für jedes Bild ein Image-Objekt instanziert und bei complete wirds dann ins DOM eingefügt und in die Fade-Reihenfolge eingebaut. Das hat den Sinn, dass da keine "halben" Bilder rumgammeln

        • Preload überhaupt nicht

        Für normale Seiten durchaus vertretbar.

        • Ich erzeuge für alle (evtl. außer denen, die das Anzeigen der Bilder deaktiviert haben) ggf. überflüssigen Trafik

        Das sowieso - und damit gehst du besonders Mobilgerätebenutzern auf den Senkel die 1 bis 2 GiB Traffic haben und Bilder trotzdem sehen möchten aber vielleicht nicht die nächsten 20 Unterseiten deiner Site besuchen wollen.

  2. Hi!

    Bzw. mit welchen Werkzeug kann ich das Verhalten der Browser prüfen?

    Die Logfiles des Webservers natürlich, ansonsten hat eigentlich jeder Browser eingebaut oder zum Nachinstallieren sowas wie die livehttpheaders-Extension für den Firefox. Damit sieht man alle Requests.

    Lo!