Beim laden der Seite werden kurzzeitig alle Bilder gezeigt

**Kim** · 08.05.2014, 11:14

Beim laden der Seite werden bei mir ganz kurz alle Slideshowbilder untereinander dargestellt.
Ist das eine Frage der Einstellungen oder an welcher Schraube muss ich da drehen?

Meine Settings habe ich mal angehangen.

**planepix** · 08.05.2014, 11:18

Hallo Kim, schau mal in den Einstellungen von Contao, ziemlich am Ende gibt es einen carouFredSel-Block.

Dann am besten die Tipps im Wiki einmal testen:
http://de.contaowiki.org/Dk_carouFre...plett_sichtbar

**Kim** · 08.05.2014, 13:28

Danke für den Tip, aber ich habe nicht das Problem das meine Inhalte nicht komplett sichtbar sind sonder das für ein paar Millisekunden alle Slideshowbilder untereinander angezeigt werden.

**tab** · 08.05.2014, 13:51

Zitat von Kim

Danke für den Tip, aber ich habe nicht das Problem das meine Inhalte nicht komplett sichtbar sind sonder das für ein paar Millisekunden alle Slideshowbilder untereinander angezeigt werden.

Aber genau das wird doch auch im von planepix angegebenen Link angesprochen. Wenn das Skript erst spät geladen wird, dann sind die Bilder oder sonstigen Elemente eben kurzzeitig (=bis dahin) gleichzeitig sichtbar.

Ändert man das Startverhalten des JavaScripts auf den Zeitpunkt zu dem die komplette Seite und alle Inhalte geladen sind ((window).load(function() {}) so umgeht man die fehlerhaft gelieferten Größenangaben. Nachteil dieser Methode ist jedoch, daß das Eintreten dieses Zeitpunkts länger dauern kann und die bis dahin geladenen Inhalte der einzelnen Slides gleichzeitig sichtbar werden. Diese werden zwar automatisch versteckt und nach Beendigung des Ladevorgangs sichtbar, nehmen jedoch ihren Raum auf der Seite ein was unschön aussehen kann.

**Kim** · 08.05.2014, 14:22

Okay, aber bei alle drei Methoden sind die Slides bei mir kurz sichtbar.

**Kim** · 08.05.2014, 14:32

Ich denke es liegt bei mir doch an den Settings vom Caroufredsel.
Dort habe ich keinen Breite bei "Größe der Elemente" angegeben.

**aussenminister** · 08.08.2014, 12:41

Hallo Kim,
ich habe dasselbe Problem mit dem kurzen Aufblitzen. Hast Du denn eine Lösung gefunden?

http://ruhrbanausen.de/frie2014/

Gruss
Dietmar Koch

**Moppi** · 15.08.2014, 10:05

Hallo Kim,

mich würde die Lösung dieses Problems auch sehr interessieren.

Gruß, Moppi

**Kim** · 15.08.2014, 11:55

Ich habe einen PreLoader auf der Seite integriert.
Die Slideshow wird nun erst angezeigt wenn alles geladen ist.
Ich weiß, das ist nicht der Königsweg aber für mich funktioniert es erstmal so!

***hofff*** · 16.08.2014, 00:43

Hallo,

diesen Effekt nennt man fouc-Effekt - Flash of unstyled Content. Der Name passt heute nicht mehr ganz, aber es ist im Prinzip das selbe Problem, nur halt heute mit JS früher mit CSS. Das Problem liegt daran, dass das JS und somit die vom JS gelieferten Funktionen für den Slider noch nicht geladen sind und somit für eine kurze Zeit das Aussehen ohne JS zu sehen ist. Wir lösen das mit einem Mini-JS. Dafür geben wir in der fe_page dem html-Tag zusätzlich die ID nojs --> <html id="nojs" lang=...> Im <head> ganz oben setzen wir dieses kleine Script: <script>document.documentElement.id="js";</script> ... das macht nix anderes, als die id="nojs" in id="js" zu ändern. Da das nur funktioniert, wenn im Browser JS aktiviert ist, ist das auch eine schöne Möglichkeit Content ohne JS als Fallback zu gestalten. Jetzt aber zum eigentlichen fouc Problem zurück. Da JS immer etwas verzögert als CSS lädt, solltet ihr jetzt den Slider mit #nojs so gestalten, dass das flackern nicht auffällt. Man könnte z.B. bei #nojs alle Bilder auf display: none setzen, außer das erste und bei #js alle wieder sichtbar machen. Das sollte dann das Problem lösen! ;-)

fg
nicky

**aussenminister** · 19.08.2014, 11:36

Hallo Kim,
darf ich fragen, wie Du den Preloader eingebunden hast?
carouselFred bietet das ja – soweit ich weiß – nicht von Haus aus als Einstellung an.
Die Idee finde ich nämlich prima ... damit könnte ich gut leben.

Die Lösung von Nicky kriege ich nicht zum Laufen, bzw. reagieren die anderen Browser weiterhin mit diesem Flackern ...

Dietmar

**sandburg** · 19.08.2014, 13:01

Zitat von hofff

...solltet ihr jetzt den Slider mit #nojs so gestalten, dass das flackern nicht auffällt.

Hallo hoff,

das funktioniert - schöne Lösung! Aber wird beim einbinden von "#nojs" in den Slider (oder wo auch immer) nicht ein "Duplicate ID nojs" als Fehler auftreten?

Viele Grüße
- sandburg -

***hofff*** · 19.08.2014, 13:28

Hallo,

die ID #nojs steht doch nur am ganz oben am html-Element dran. Woanders darf sie nicht auftauchen. Aber darüber sprichst du ja die Element dann an: #nojs .meine-klasse ... sie muss nur da oben stehen.

fg
nicky

**Kim** · 19.08.2014, 14:30

Zitat von aussenminister

Hallo Kim,
darf ich fragen, wie Du den Preloader eingebunden hast?
carouselFred bietet das ja – soweit ich weiß – nicht von Haus aus als Einstellung an.
Die Idee finde ich nämlich prima ... damit könnte ich gut leben.

Die Lösung von Nicky kriege ich nicht zum Laufen, bzw. reagieren die anderen Browser weiterhin mit diesem Flackern ...

Dietmar

Hier sind zwei Beispiele:

http://niklausgerber.com/blog/preloa...ite-preloader/
http://tympanus.net/codrops/2014/08/...oading-effect/

**sandburg** · 19.08.2014, 14:34

Hallo hofff,

ich habe gar kein „Slider-Problem“ sondern meine Aufgabe war ähnlicher Natur.
Dein Tipp brachte mich auf einen anderen Gedanken und ich hab‘s nun ohne JS aber mit „display:none“ gelöst.

Danke fürs schupsen...

Viele Grüße
- sandburg-

**Dirch** · 19.08.2014, 20:07

Ihr könntest auch die Contao CSS-Klasse "invisible" dafür verwenden und nachdem document.ready getriggert wurde diese Klasse vom Container wieder entfernen. Funktioniert bei meiner mmenu-Erweiterung so ziemlich gut. Evtl. übernehme ich das noch in den Fredsel, aber habe aktuell nicht so viel Zeit um mögliche Seiteneffekte zu finden.

**zonky** · 26.08.2014, 20:07

bei mir geht das meistens ganz gut, wenn das umgebende Div per CSS erstmal eine feste Höhe bekommt - bei responsive, werden die Höhen dann eh als Inline-Style umgeschrieben...

**Willi** · 09.09.2014, 17:47

Zitat von Kim

Hier sind zwei Beispiele:

http://niklausgerber.com/blog/preloa...ite-preloader/
http://tympanus.net/codrops/2014/08/...oading-effect/

Ich habe eben vergeblich versucht, den Preloader von niklausgerber.com bei mir einzubauen ... jetzt werden alle vier Bilder meines Sliders untereinander angezeigt - und bleiben auch sichtbar. Ich habe meinen Code mehrmals kontrolliert und kann da keinen Fehler entdecken.
Oder gibt es einen Konflikt mit den Skripts vom Slider?

Gruß, Klaus

**Willi** · 09.09.2014, 18:46

... mich hat es ja nicht in Ruhe gelassen ... und nach Probieren im Ausschlußverfahren bin ich schließlich drauf gekommen

:

das jquery.min.js, dass lt. niklausgerber.com eingebunden werden soll muss man weglassen (wird wohl durch Contao und/oder dk_caroufredsel schon eingebunden). Und kaum macht man(n)s richtig, schon funktionierts. Dies vielleicht als Tipp an Interessierte. Ansonsten werden die zusäzlichen <DIV>s etc. am einfachsten in der fe_page eingebunden.

Herzliche Grüße,
Klaus

**Samson1964** · 11.09.2014, 06:32

Ich habe so ein ähnliches Problem mit den Figuren im Fuß von schachbund.de gehabt. Die wurden z.T. bereits (oben) angezeigt, bevor überhaupt irgendwas anderes von der Seite geladen war. Jetzt füge ich sie mit JQuery erst in das HTML ein, wenn der Rest der Seite vollständig da ist.

HTML-Code:

(function($) {
  $(document).ready(function() {
    $('#body').delay(0).queue(function() {
      $('#body').css("background","url(/files/dsb/theme2014/figuren_fuss.png), url(/files/dsb/theme2014/figuren_fuss.png)");
      $('#body').css("background-repeat","no-repeat, no-repeat");
      $('#body').css("background-position","left bottom, right bottom");
    });
  });
})(jQuery);