Flexslider stellt die Slides kurz alle untereinander dar. Why?

Hallo

Ich habe bei einer 3.2.8er und Flexslider einen Effekt, den ich mir nicht erklären kann.

Die Seite lädt, der Slider wird aufgebaut, aber zuerst alle Slides untereinander, das dauert 1 bis 2 Sekunden bei einem Neuaufruf, dann fängt er sich und alles stimmt. Beim Reload der Seite blitzen die Slides kurz untereinander auf und der Slider läuft.

Er ist absolut positioniert mit z-index 1, weil er unterhalb (Z-Achse) anderen Elementen läuft.

Wo muss ich noch was drehen, damit er wartet bis er alles hat?

Piet

Liegt vermutlich daran, dass die Extension den Slider mit

PHP-Code:

---

$(window).load(...); 


---

initialisiert. Dabei wird gewartet, bis dass die Seite vollständig geladen ist (inklusive aller Ressourcen). Du könntest versuchen dir ein eigenes flexSlider_default Template zu erzeugen und dann

PHP-Code:

---

$(window).load 


---

mit

PHP-Code:

---

$(document).ready 


---

ersetzen (kommt zwei mal vor). Kann dir aber nicht versprechen, dass das nicht zu anderen Nebenwirkungen führt ;).

Das macht der FlexSlider deshalb, damit in Webkit-Browsern in Kombination mit jQuery die Höhenberechnung der Bilder klappt. Bei docready haben diese nämlich die Eigenheit bei noch nicht komplett geladenen Bildern eine falsche/kaputte Höhe zu liefern und dem Slider so die Möglichkeit zu nehmen die Höhe ordentlich zu berechnen. Deshalb gibt es unglaublich viele Scripts, die versuchen so ein Zwischending zwischen docready und windowload hinzubekommen - siehe z.B. imagesloaded, das ein Event auslöst nachdem ein Bild komplett geladen wurde, um dann z.B. den Slider neu zu initialisieren...

Der FlexSlider geht hier den Weg des geringsten Widerstands was zur Folge hat, daß er erst initialisiert wird wenn ALLES geladen wurde. Ja nachdem wie schnell/lahm die Verbindung ist sieht man daher den unformatierten Inhalt entsprechend kürzer oder länger.

Zitat:

---

Zitat von Dirch

Bei docready haben diese nämlich die Eigenheit bei noch nicht komplett geladenen Bildern eine falsche/kaputte Höhe zu liefern und dem Slider so die Möglichkeit zu nehmen die Höhe ordentlich zu berechnen.

---

Das wird jedoch nur benötigt, wenn die <img> Tags keine width="" und height="" Attribute besitzen. Sind diese Attribute gesetzt, haben zumindest diese Elemente auch schon bei docready die richtige Höhe.

Wenn das der einzige Grund für window load ist und alle Bilder aus dem Contao System kommen bzw. eben die korrekten Attribute besitzen, kommt man wahrscheinlich mit docready aus.

Lösung:

Beim Flexslider kann man die Größen der Bilder nicht einstellen, daher wird er die Bilder wohl immer zuerst untereinander darstellen.

ABER es gibt eine TRICK mit CSS:

ul.slides li {display: none;}

Have fun
Piet

Schon bisschen älter der Thread, aber ich hak da nochmal nach!
Wann schaltest du den Slider wieder sichtbar?

Feuert der Flexslider ein Event dazu ab?