napoleon: problem:hover effekt nicht flüssig

SELF-Forum

problem:hover effekt nicht flüssig

napoleon
– Informationen zu den Bewertungsregeln

Hallo;
hab einen hover-effekt für mein Bild per css erstellt,
wenn man nun über das Bild fährt wird erst nichts angezeigt
bis das hoverbild geladen ist,
(zwar nur kurze zeit trotzdem schauts nciht gerade schön aus)

http://home.arcor.de/napolen/test.html

was kann man machen?

mfg andi

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. problem:hover effekt nicht flüssig

    rob
    – Informationen zu den Bewertungsregeln

    Hi!

    wenn man nun über das Bild fährt wird erst nichts angezeigt
    bis das hoverbild geladen ist,

    Wie dir aufgefallen ist, passiert dies nur beim allerersten Mal. Ist das Bild einmal geladen, dann kommt es beim nächsten Hover aus dem Browsercache anstatt neu aus dem Internet angefordert zu werden.

    Du könntest dein Bild bereits (vor)laden, damit es schon vor dem ersten Hover im Browsercache liegt.
    Das ist mit Hilfe von Javascript recht einfach möglich, indem du ein neues Imageobjekt instantiierst.
    Bilder vorladen mit JavaScript
    (Achtung, komische Navi! Unten auf der Seite befinden sich die "Themen" des Artikels. Sind keine Links, kann man nicht klicken... Weiter geht es nur über die Pfeilsymbole rechts unten.)

    Da nicht alle User JS aktiviert haben, solltest du jedoch in Erwägung ziehen, ob du das Bild nicht vielleicht ohne die Hilfe von JS in den Cache lädst.

    Aus dem Forumsarchiv:
    Bilder vorladen ohne JavaScript

    Da dies IMHO keine perfekte Lösung ist, mußt du dir selbst überlegen, welche Methode du bevorzugst.

    Schöner Gruß,
    rob

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. problem:hover effekt nicht flüssig

      andi
      – Informationen zu den Bewertungsregeln

      vielen dank für die nützlichen Vorschläge,
      werd mich gleich dransetzten und alles ausprobieren.
      mfg andi

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. problem:hover effekt nicht flüssig

        andi
        – Informationen zu den Bewertungsregeln

        vielen dank für die nützlichen Vorschläge,
        werd mich gleich dransetzten und alles ausprobieren.
        mfg andi

        P.S hab mich für die Möglichkeit/den Trick entschieden,
        die Bilder sofort einzubinden mit width:1px und height:1px;,
        damit sie im cache sind...

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

  2. problem:hover effekt nicht flüssig

    Gunnar Bittersmann Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Hello out there!

    hab einen hover-effekt für mein Bild per css erstellt,
    wenn man nun über das Bild fährt wird erst nichts angezeigt
    bis das hoverbild geladen ist,
    (zwar nur kurze zeit trotzdem schauts nciht gerade schön aus)

    Kurze Zeit? Bei mir dauerte es eine Ewigkeit.

    Das liegt daran, dass bild1.jpg erst zum Zeitpunkt des Wirkens des ':hover'-Selektors vom Server angefordert wird und dann erst zum Client übertragen wird. Sorge also dafür, dass das Bild sofort beim Aufrufen der Seite geladen wird und dann beim ':hover' schon im Browsercache ist.

    Das kann mit JavaScript geschehen (siehe Thread Bilder vorladen). Oder kuckst du bei Ingo Turski: [link:http://1ngo.de/web/bildwechsel.html@title=Bildwechsel mit CSS mal ganz anders.

    Wobei bei relevantem Inhalt dafür zu sorgen ist, dass für Nutzer (u.a. Clients!) ohne Bildanzeige und/oder CSS-Unterstützung auch die notwendigen Alternativtexte vorhanden sind.

    See ya up the road,
    Gunnar

    --
    „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. problem:hover effekt nicht flüssig

      Gunnar Bittersmann Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Hello out there!

      Fast hätte’s geklappt.

      Das kann mit JavaScript geschehen (siehe Thread Bilder vorladen). Oder kuckst du bei Ingo Turski: Bildwechsel mit CSS mal ganz anders.

      See ya up the road,
      Gunnar

      --
      „Wer Gründe anhört, kommt in Gefahr nachzugeben.“ (Goethe)
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln