Elya: Ladezeitpunkt animated Gif in unsichtbarem Layer

Hallo Ihr da draußen,
ich hänge mal wieder fest! Folgende Situation:

In einem großen Layer sind ganz viele kleine absolut und teilweise "hidden" positioniert. Davon immer 3 genau übereinander mit aufsteigenden z-index.

  • Im untersten liegt ein Textlink
  • Der mittlere enthält ein Bild
  • Der obere ein animated gif, das sich von "Vollfläche Weiß" zu "Transparent" verändert.

OnMouseover (textlink) werden die beiden oberen Layer sichtbar gestellt. Klappt auch alles. Es soll so aussehen, als ob das Bild eingeblendet wird. Da es ganz viele dieser Konstruktionen sind, habe ich diese 2-Layer-Variante gewählt; so muß das animated Gif nur einmal im Cache sein.

Aber jetzt: in NN6,4.x und Opera 6 werden die animated Gifs anscheinend schon geladen und gestartet, wenn sie unsichtbar plaziert werden. Laden ist ja gut, aber der Effekt ist, daß onMouseover die ganze Animation schon gelaufen ist und das darunterliegende Bild "hart" eingeblendet wird... Nur der IE5.5 zeigt die Animation jedesmal aufs Neue.

Kann mir jemand folgen und hat vielleicht sogar eine Idee, wie man das lösen kann? Vielleicht ist ja meine Konstruktion auch viel zu kompliziert und es gibt eine einfachere, bandbreitenschonende Lösung...

Schönen Dank vorab,
und Gruß aus Ehrenfeld
Elya

  1. Also ich hab mir jetzt keine Gedanken gemacht, ob man die ganze Konstruktion vielleicht besser machen könnte, aber Du könntest in Bezug auf Deine Konstruktion folgendes machen.

    Solange der textlink mit der Maus nicht überfahren ist hast Du in Deinem Layer, der das Bild mit dem Verlauf von weiss nach transparent beinhaltet nicht dieses Bild sondern zunächst ein anderes Bild (.z.B. ganz weisses Gif oder irgendein anderes Bild, ist ja egal, die Ebene ist sowieso unsichtbar)
    Sobal der Testlinkt mit der Maus überfahren wird tauschst du dieses transparente Gif durch das Verlaufs-gif aus und zeigst den layer an.

    Das austauschen ist ja dann wie 'neu laden' und alle browser müssten mit der Animation von vorne angfangen

  2. Hoi

    Aber jetzt: in NN6,4.x und Opera 6 werden die animated Gifs anscheinend schon geladen und gestartet, wenn sie unsichtbar plaziert werden. Laden ist ja gut, aber der Effekt ist, daß onMouseover die ganze Animation schon gelaufen ist und das darunterliegende Bild "hart" eingeblendet wird... Nur der IE5.5 zeigt die Animation jedesmal aufs Neue.

    Probier einfach mal, für die besagten Browser zunächst ein rein weißes GIF da rein zu laden, das animierte lädst Du irgendwo in die Pampa (damit's schonmal im Cache ist).
    onMouseover lädst Du dann das animierte in den besagten Layer.

    Ciao,

    Harry

  3. Sorry,

    das Antworten muss sich wohl überschnitten haben, deshalb die gleiche Antwort wie Harry. Zwei Leute mit der gleichen Meinung, dann muss es ja richtig sein :-)

  4. Hallo Harry und Markus,
    vielen Dank, das ist eine prima Idee, ich hab nur etwas Probleme in der Umsetzung:

    z.B. für die neuen Browser:

    else if (v6) {
            document.images['shim'].src = ani.src;
            document.getElementById(layerid1).style.visibility = "visible";lastteamlayer1 = layerid1;
            document.getElementById(layerid2).style.visibility = "visible";lastteamlayer2 = layerid2;
            }

    'shim' ist der name des unsichtbaren gifs, und 'ani' ist das Bildobjekt des animierten gifs, in der html-Seite definiert. In layerid1 ist die Animation, in layerid2 das darunterliegende Bild.

    Auch das läuft richtig im IE, aber der NN6 läßt das darunterliegende Bild kurz aufblitzen, bevor er die Animation zeigt. Hab's mit einem Timeout versucht, aber da gab's dann Probleme mit den Parametern.

    Das entsprechende Script für NN4:
    if (ns4!=false) {
          document.layers['teamcontent'].document.layers[layerid1].document.images['shim'].src = ani.src;
          document.layers['teamcontent'].document.layers[layerid1].visibility = "show";lastteamlayer1 = layerid1;
          document.layers['teamcontent'].document.layers[layerid2].visibility = "show";lastteamlayer2 = layerid2;}

    funktioniert überhaupt nicht - harte Einblende ohne Animation. Die Adressierung ist korrekt, alles mit alert() getestet, und es kommt auch keine Meldung in der Konsole...
    Opera schleßlich macht es einmal richtig, und dann wieder hartes Einblenden...

    Online zeigen geht leider nicht...

    Ratlose Grüße aus Kölle
    Elya