1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Wird die .png vorgeladen?

Dieses Thema im Forum "PHP & Co." wurde erstellt von ProAWX, 16.05.09.

  1. ProAWX

    ProAWX Granny Smith

    Dabei seit:
    16.04.08
    Beiträge:
    12
    Hey Community,

    ich hab mal eine Frage zu meinem CSS Code. Ich habe eine Farbbox. Wenn man auf diese Farbbox mit der Maus geht, erscheint eine kleine schwarze Box mit Text (in Form einer transparenten .png).
    Ich wüsste gerne ob die png beim Laden der Website mitgeladen wird, ich glaube nämlich nicht. Ich denke sie wird erst geladen wenn der Rollover stattfindet. Praktisch kann ich das nicht wirklich testen weil ich eine sehr schenlle Internetanbindung hab und die png sehr klein ist, aber als DSL1000 oder ISDN user würde man das sicherlich merken. Deshalb frage ich einfach mal technisch an, ob ein Preload statt findet oder nicht!

    Hier der Code für den Link:
     
  2. bezierkurve

    bezierkurve Danziger Kant

    Dabei seit:
    12.06.05
    Beiträge:
    3.861
    Korrekt.
     
  3. ProAWX

    ProAWX Granny Smith

    Dabei seit:
    16.04.08
    Beiträge:
    12
    Was kann ich dagegen tun? Vielleicht eine doppelt so große PNG erstellen und die per Hintergrund verschiebung als Rollover nutzen?
     
  4. bezierkurve

    bezierkurve Danziger Kant

    Dabei seit:
    12.06.05
    Beiträge:
    3.861
    Genau, bau sie in ein Bild ein, das bereits im Ursprungszustand sichtbar ist; ist imho der eleganteste Weg.
     
  5. ProAWX

    ProAWX Granny Smith

    Dabei seit:
    16.04.08
    Beiträge:
    12
    a.about {
    display: block;
    width: 516px;
    height: 84px;
    background-color: #c21414;
    background-image: url(img/about.png);
    }

    a.about:hover {
    background-position: 0 -84px;

    funktioniert gut so :) danke
     
  6. bezierkurve

    bezierkurve Danziger Kant

    Dabei seit:
    12.06.05
    Beiträge:
    3.861
    PS: Wann welche Daten geladen werden, kannst du dir in Safari ganz bequem über die „Webinformationen“ im Menü „Develop“ anzeigen (das Menü musst du in den Einstellungen unter „Erweitert“ aktivieren).

    Und für Firefox kannst du für diesen Zweck die Erweiterung Firebug verwenden.
     
  7. gKar

    gKar Maunzenapfel

    Dabei seit:
    25.06.08
    Beiträge:
    5.362
    Eine andere Möglichkeit, ohne die Grafik verändern und um eine feste Pixelzahl verschieben zu müssen, wäre das Einfügen der Grafik unsichtbar in den Content, um ein Preloading auzulösen. Z.B. wie folgt:
    <img src=".....png" width="0" height="0" alt="">

    Das sorgt dafür, dass die Grafik mit dem Dokument zusammen geladen wird, jedoch an der Stelle im Dokument nicht sichtbar ist. Wird sie nun noch an anderen Stellen dynamisch eingeblendet, ist sie schon gecached und muss nicht mehr nachgeladen werden.
     
  8. Slashwalker

    Slashwalker Winterbanana

    Dabei seit:
    15.05.06
    Beiträge:
    2.190
    Die saubere Lösung, via CSS Sprites, wurde doch schon erfolgreich umgesetzt. Eine Lösung, mit zusätzlichem, nicht sichtbarem Markup halte ich persönlich für Pfusch.
     

Diese Seite empfehlen