So blenden Sie Bilder aus, bis NACH dem Beenden von jquery flexslider geladen wird

8

Ich habe versucht, woothemes Flexslider auf meiner Seite zu integrieren, und es sieht / funktioniert großartig, außer wenn es geladen wird.

Wenn Sie die Seite mit dem Schieberegler aktualisieren, bevor der flexslider lädt (etwa 1 Sekunde), erscheint die erste Folie sehr groß und blinkt zu schwarz, dann verschwindet sie und dann erscheint das Karussell.

Ich denke, das Bild wird schneller geladen als die jQuery? Wie kann ich das Bild bis jQuery lädt (wie auf der Demo-Website, auch wenn ich 3 Milliarden Mal aktualisieren, das Problem wiederholt sich nie auf ihrer Website, es lädt alle elegant! - Ссылка )

Ich lud die flexlisder.js direkt nach jquery und kopierte den gleichen HTML-Code aus der Demo (passend zur .css-Datei, die auch geladen ist. Und hier ist der Init-Code, den ich benutze - von der Demoseite auch:

%Vor%     
user1945912 01.02.2013, 21:56
quelle

6 Antworten

19

Sie müssen sich mit den Callback-Funktionen für das von Ihnen verwendete Plugin beschäftigen Verstecke alle Bilder aus CSS mit einer Klasse, sagen wir flexImages

%Vor%     
Seder 01.02.2013, 22:04
quelle
6

Setzen Sie den Standardstil für "display" auf "none". Mit show () wird dieser Stilwert geändert.

    
Steve H. 01.02.2013 22:01
quelle
1

Außerdem wurde festgestellt, dass die Folien vor dem Laden blinken und die Seite mit den Listenpunktaufzählungen angezeigt werden.

Nur für eine Sekunde. Dann hat es gut funktioniert. Mir war nicht klar, dass ich die Datei flexslider.css nicht mitgeschickt hatte, da ich bereits eine Navigation deaktiviert hatte, die defekte Nav-IMG-Links angezeigt hätte.

Denken Sie daran, das CSS aufzunehmen!

    
dasCode 03.12.2013 18:01
quelle
0

Ich habe ein ähnliches Problem erlebt, als ich vergessen habe, die flexslider.css

hinzuzufügen     
Ross Hambrick 29.05.2013 15:12
quelle
0

Ich setze einfach in das CSS des div, das den Schieberegler enthält: overflow: hidden; Höhe: die Höhe der Bilder, die Sie verwenden, dann funktioniert es perfekt!

update: Dies ist keine reaktionsfähige Lösung, da der Schieberegler die Größe ändert ... was kann ich tun?

    
dmtnexer 18.03.2014 16:42
quelle
0

... ich hatte das gleiche Problem, versuchte die js Lösung oben - es funktionierte gut, aber dann erkannte ich, wenn js aus irgendeinem Grund deaktiviert ist - dass nichts angezeigt wird, also entschied ich mich für eine non js Lösung zu suchen:

Ich habe gerade so etwas für den speziellen Schieberegler eingefügt:

%Vor%

hat gut funktioniert, sogar reagiert. Hoffnung, die helfen kann!

    
Chris 21.04.2015 17:03
quelle