Darstellung caroufredsel beim Laden alle Elemente untereinander

[maipe]

Moin! Eigentlich ist mit caroufredsel alles super bis auf eins, was bei mir den produktiveinsatz noch behindert: Beim Laden werden die zum Sliden ausgewählten Inhaltselemente zunächst untereinander dargestellt - bevor der eigentliche Slide beginnt.

(Contao 3) Woran könnte das liegen?

Ist wahrscheinlich nur eine Einstellungssache? Sonst echt tolle Erweiterung, finde ich.

Viele Grüße
Maik

EDIT: Upps nach dem letzten Update fehlt ein Slide komplett.

[Dirch]

Moin! Eigentlich ist mit caroufredsel alles super bis auf eins, was bei mir den produktiveinsatz noch behindert: Beim Laden werden die zum Sliden ausgewählten Inhaltselemente zunächst untereinander dargestellt - bevor der eigentliche Slide beginnt.

(Contao 3) Woran könnte das liegen?

Ist wahrscheinlich nur eine Einstellungssache? Sonst echt tolle Erweiterung, finde ich.

Das ist ein Kompromiss falls man responsive/variable Größen in Webkit-Browsern verwendet. Chrome und Safari haben hier ein Problem (laut des Autors vom Slider) während des Aufbaus der Seite korrekte Größenangaben (vor allem Höhe) zu liefern. FF macht dies generell "richtig". Daher ist in den Contao-Einstellungen "onWindowLoad" voreingestellt, daß zwar für den sichtbaren Aufbau sorgt, aber zusätzlich auch, daß nach dem Laden in der Höhe alles sichtbar ist. Falls man Bilder fester Größe hat und diese auch hinterlegt (entweder in der Konfiguration oder per CSS), dann kann man dort "onDocumentReady" einstellen was dies verhindert sollte. Wenn das nicht hilft, dann evtl. noch dieser Tipp ganz unten auf der Seite: http://caroufredsel.dev7studios.com/...and-tricks.php

EDIT: Upps nach dem letzten Update fehlt ein Slide komplett.

Nach dem letzten RC und der Stable-Version hat sich in diesem Code-Teil eigentlich nichts geändert. Der Slider selbst baut nur Wrapper um die von Contao ausgegebenen Inhalte. Hast du mal geschaut, ob auch alle Inhalte im Quellcode zu finden sind?

[maipe]

Werde ich mal abchecken. Vielen Dank für die ausführliche Antwort! :-)


EDIT - bevor ich da jetzt weiter forsche - gibt es von caroufredsel eine funktionierende, responsive Installation/Beispiel ohne den Bug (Kompromiss) bei Webkit Browsern?

[Nina]

Optimal ist keine dieser Lösungen, aber für die Sache mit Safari und Chrome gibt es wohl bisher keinen anderen funktionierenden Ansatz. Das hat imho auch nicht speziell mit Caroufredsel zu tun, sondern ist ein generelles Problem in der Art wie die Webkit-Browser den Viewport und Co berechnen. Da gibt es noch ganz andere Probleme abseits von Slidern in die ich schon gerannt bin ^^

This is because the browser may render elements before the DOM is fully loaded and before the DOMContentLoaded event is fired.

Allerdings wäre es doch interessant, ob man das Script so umbauen kann, dass es via Javascript die Bilder unsichtbar vorlädt und erst alles sichtbar macht wenn das DOM voll geladen und das DOMContentLoaded ausgelöst wurde?


Der verlinkte CSS-Ansatz macht bei responsive nicht wirklich Sinn, da die Höhe der Bilder je nach Bildschirmbreite ja unterschiedlich ist (responsive eben). Ich habe diese "Lösung" daher derzeit nur bei der Maximalgröße via Media Query eingestellt, da ich dort ausnahmsweise die Höhe kenne, aber für kleinere Auflösungen darf ich das nicht so angeben, da ich sonst den Responsive-Ansatz wieder kaputt mache.

[Dirch]

Allerdings wäre es doch interessant, ob man das Script so umbauen kann, dass es via Javascript die Bilder unsichtbar vorlädt und erst alles sichtbar macht wenn das DOM voll geladen und das DOMContentLoaded ausgelöst wurde?

Ich hab ein Script von ihm ausprobiert, das ein Mittelding zwischen dem onDocumentReady und onWindowLoad macht. In seinem Demo klappt das toll und auch so funktionierte es wunderbar bis auf die Tatsache, daß es den Webkit-Browsern total schnuppe war (in Kombination mit der Einbettung in Contao). Es gibt sogar ein "updateSizes"-event. Das habe ich auch schon im Nachgang - und da war ja wirklich alles geladen und sichtbar und und und - getriggert. Meinst du die Webkit-browser hat das auch nur ansatzweise interessiert? Das ist echt zum Haare raufen. Leider ist das in carouFredSel nicht eingebaut mit dem "loader". Manche andere Slider haben sowas integriert. Das find ich auch schade.

Ich kann mal probieren, ob ich die Bilder außerhalb unsichtbar setzen kann und dann über das onCreate-Event beim Initialisieren des Sliders sichtbar schalte. Ich befürchte aber schon, daß das dann anderweitig seltsam ausschaut. Möglicherweise meint dann Webkit weil sie unsichtbar sind haben/brauchen sie gar keine Größe und der Inhalt hüpft anderweitig umher.

[Nina]

Es wäre toll, wenn du da etwas findest, da der Effekt wirklich unschön ist und Laien leider total egal ist, dass eigentlich die Webkit-Browser "schuld" sind

[Dirch]

Ich schau's mir mal an. Bin gerade dabei mir nen jQuery Buch zu bestellen um da besser reinzukommen. Wird wohl langsam Zeit, daß ich mich mit dem JS-Kram mal intensiver beschäftige. ^^

Hier ist dieses Script, das ich ausprobierte: http://www.frebsite.nl/projects/readyload/ Interessant ist der Erklärungs-Text, der die Thematik technisch ganz gut beschreibt. Mir ist es noch ein Rätsel warum es nicht in Contao klappte. Vielleicht weil der Slider recht tief eingebettet ist.

Ich dachte mit dem Wegfall der alten IE-Versionen würde Webseiten erstellen endlich anfangen Spaß zu machen...

[maipe]

hm - Hinweis im Erweiterungskatalog? Bis die Lösung gefunden ist?

[Dirch]

Kann jemand diesen Code in einem angepaßten Template hinzufügen und mir berichten? Bei mir scheint es damit zu gehen. Wichtig ist, daß es nach wie vor auf "onWindowLoad" eingestellt ist. Dankesehr.

(function($) {
    $(document).ready(function() {
        $("#caroufredsel_<?php echo $this->id; ?>").css('visibility', 'hidden');
    });
    $(window).load(function() {
        $("#caroufredsel_<?php echo $this->id; ?>").css('visibility', 'visible');;
    });
(...)

[Nina]

An welcher Stelle in welchem Template genau soll ich es einfügen zum Testen?

[Dirch]

An welcher Stelle in welchem Template genau soll ich es einfügen zum Testen?

oh sorry, das hätte ich wohl dazu schreiben sollen. ^^

Im js_caroufredsel ganz oben.

$(document).ready(function() { 
        $("#caroufredsel_<?php echo $this->id; ?>").css('visibility', 'hidden'); 
    }); 
    $(window).load(function() { 
        $("#caroufredsel_<?php echo $this->id; ?>").css('visibility', 'visible');; 
    });

direkt nach dem

(function($) { 

einfügen. Der Schnipsel sorgt dafür, daß sobald die Seite da ist und "gebaut" wird die Bilder vom Slider versteckt werden und wenn alles geladen wurde wieder sichtbar werden.

[Nina]

Hier im Firefox scheint es zu funktionieren. Ich teste mal weiter.

[Dirch]

Hier im Firefox scheint es zu funktionieren. Ich teste mal weiter.

Ich hab gesehen, daß du es auf dieser Seite eingebaut hast. Die Bilder sind in Safari ebenfalls nicht mehr zu sehen. Zumindest schaut es so besser aus. (Du solltest deine Kommentare entfernen oder als php-Kommentare schreiben. So stehen sie im Quelltext und ich weiß nicht, ob du das wolltest.)

Habe aber wohl generell eine Lösung gefunden. Ich habe erneut sein "readyLoad" hinzugefügt und eine Einstellung gefunden mit der es auch bei document.ready funktioniert. Jetzt wird der Slider mehrfach neu initialisiert, da es nicht ausreicht über das "updateSizes"-Event die Größen neu berechnen zu lassen. Das Event wird zwar mehrfach getriggert, aber es ändert sich nichts.

Um rauszufinden, ob die mehrfache Initialisierung praktikabel ist, bräuchte ich daher jemanden, der die angepaßte Version in seiner Umgebung für mich testen würde. Ich habe soweit keine negativen Auswirkungen festgestellt.

Es gäbe noch die Möglichkeit die Bilder zu preloaden und erst danach den Slider zu initialisieren, aber das kann bei einer Menge an Bildern womöglich recht lange dauern außerdem kollidiert es mit der Tatsache, daß der Slider kein rein Bild-Slider ist und gar nicht wissen kann, ob er sich gleich aufbauen muß oder warten soll.

[Dirch]

sooo ich hab vorhin eine neue Version ins ER gestellt, die dieses jQuery.readyLoad einbindet. Bei mir funktioniert es damit soweit gut. Probiert es mal aus. Einstellen könnt ihr es in den Contao-Einstellungen...

Viel Spaß...

[maipe]

Gerade nocheinmal getestet:

Mit der aktuellen Version aus dem ER für 3.0.0 - 3.1.0RC1 und eingestelltem "ReadyLoad" erscheinen nach wie vor alle Bilder untereinander bevor der Slider startet.

EDIT: Auch mit der Anpassung des Templates - selber altbekannter Effekt.

An der weißblauen Luft hier in München wirds wohl nicht liegen. ;-) Gehts bei Euch denn jetzt?

LG

[Dirch]

hmm hast du einen Link wo ich mir das Anschauen kann? Ich kann das beim besten Willen nicht nachvollziehen und habe carouFredSel nun schon auf so vielen Seiten aktiv gesehen, wo das ebenfalls nicht auftritt.

PS: welchen Browser benutzt Du denn?

[maipe]

Beim Firefox passiert das, ich hab da nix produktiv, hast du vielleicht einen Link wo der Slider responsive integriert ist?

[Dirch]

Beim Firefox passiert das, ich hab da nix produktiv, hast du vielleicht einen Link wo der Slider responsive integriert ist?

hier z.B.: http://www.ck2013.think-contao.de/im...onen-2013.html

Welche Startmethode hast du denn aktiviert? Bei 'onDocumentReady' wird das Script gestartet sobald die HTML-Datei da ist und der DOM aufgebaut wurde - also der Zeitpunkt bei dem die ganzen Scripts gestartet werden. Da sind noch keine Bilder geladen. Bei 'readyLoad' wird das Script zum gleichen (frühen) Zeitpunkt gestartet, aber in Intervallen neu initialisiert wegen der Webkit Browser und ihrer fehlerhaften Bildhöhen-Rückmeldung an jQuery. Nur bei "onWindowLoad" wird das Script erst gestartet, wenn das komplette Dokument einschließlich aller Inhalte geladen wurde - also auch alle Bilder müssen geladen sein. Nur in diesem Fall sind alle Bilder physisch vorhanden und werden ausgegeben bis das Script gestartet wird.

Ich habe das im FF eben nachstellen/nachvollziehen können - bei Einstellung 'onDocumentReady' und 'readyLoad'. Allerdings passiert das nur, wenn die Seite das allererste Mal aufgerufen wird. Selbst mit anschließendem Cache löschen und Neuladen wird nur ein Bild in der richtigen Größe angezeigt. Nur wenn ich den FF beende und neu starte, sehe ich alle Bilder in original größe untereinander bis sie komplett geladen wurden. Das Verhalten kannte ich früher so nicht. Evtl. kam das in den letzten FF Versionen so hinein? Jedenfalls sieht das eher nach einem Missverhalten von FF aus, da es bei mir nur beim Neustarten des Browsers auftritt. Aber genau kann ich es natürlich nicht sagen. Jedenfalls liegt es wohl leider außerhalb meines Einflussbereichs. ;( Würd mich mal interessieren wie es anderen Slidern da ergeht.

[maipe]

Oh Peter Müller in Aktion - tolle Bilder. Aber auch da ist es reproduzierbar.

Also dann - ne Alternative muss her - Galeria, wenn man Ordnerinhalte (getestet auf 2.11) sliden will - habe allerdings noch keine Möglichkeit gefunden, den Crossfade zu aktivieren.
Flexslider crossfadet ohne Probleme unter Contao 3, die Elemente müssen allerdings einzeln integriert werden.

dk_caroufredsel wäre schon das beste, und wahrscheinlich ist es wiedermal nur eine scriptzeile irgendwo. Nur Wo??

[pmmueller]

Oh Peter Müller in Aktion - tolle Bilder. Aber auch da ist es reproduzierbar.

Den Slider hat Thomas Weitzel eingebaut ;-)

[plusx]

Ist das Problem inzwischen gelöst? Bei mir tritt es auch im IE9 auf!

[Dirch]

Ist das Problem inzwischen gelöst? Bei mir tritt es auch im IE9 auf!

Das ist doch kein Problem der Erweiterung, sondern eines der Browser weil sie unterschiedlich layouten/rendern. Siehe hier: http://caroufredsel.dev7studios.com/...and-tricks.php ganz unten. Eine Erklärung und wie man es beheben kann.

[plusx]

Du meinst "Preventing F.O.U.C". Wenn ich allerdings eine feste Höhe einstelle, dann ist der Slider ja nicht mehr responisve, weil der Fall ja jedesmal auftritt, wenn nicht genau diese Höhe eingehalten wird.

[derRenner]

Hallo plusx

ich hatte das gleiche Problem - wohl bei einem anderen Slider, aber ... - für mich mit jQuery gelöst ...
Hier ein Ansatz - mag nicht der Beste sein, aber es läuft zumindest

Grüsse
Bernhard

[plusx]

1000 Dank! Das funktioniert!

[Dirch]

ah fein es hat sich mittlerweile erledigt.

Hier ein Ansatz - mag nicht der Beste sein, aber es läuft zumindest

es ist die einzige Möglichkeit so. Allerdings kann man es geschickter machen, wenn man zugriff auf die Templates hat. Man trägt dort schon in das Element die Klasse ein mit der man es versteckt. Je nachdem greift das dann noch einen Ticken früher. Entfernen tut man dann die Klasse mit jQuery. So mache ich es bei dk_mmenu und will mal schauen, ob ich das so für den caroufredsel übernehmen kann.

Die Klasse ist eine Contao-Klasse mit Namen invisible. Sie dient zwar einem anderen Zweck, aber für die Bruchteile der Zeit darf man sie auch missbrauchen. Mit (...).removeClass('invisible'); nimmt man sie vom Element weg...