Slider - beim Laden der Seite Bilder vorerst untereinander

Hallo,

ich setze in einem Projekt den npSlider ein. Beim Laden der Seite werden aber mal für einen kurzen Moment die Bilder untereinander angezeigt. Ich habe bereits hierzu nach ähnlichen/gleichen Problemen gesucht und bin hier fündig geworden.
Es handelt sich hier wohl um den dkCaroufredsel Slider, die Problematik ist aber die Gleiche - und nachdem es scheinbar nicht mit dem Slider selbst in Verbindung zu bringen ist, habe ich den thread auch hier hergestellt und nicht direkt im Erweiterungsthread des npSliders ...

So, es geht um diese Seite
http://www.malerei-schmid.at/cms/

Unter Referenzen ist ein weiterer Slider eingebaut, der im Moment nur aus drei Bildern besteht - hier fällt das nicht so stark auf.
Da mein Kunde aber auf den Referenz-Seiten jeweils einen Slider mit gut 10 bis 15 Bilder haben möchte, fürchte ich, dass sich dieses Verhalten verstärkt und die jeweilige Seite bis zum Vollständigen Laden der Bilder einfach "unansehlich" sein wird.

Im Firefox (v23) tritt dies nicht auf - dort sieht das ganz toll aus. Im Chrome (v28) und IE10 tritt dieses Problem auf.

Die Slider werden via Articel eingebettet.

Hat jemand eine Idee, wie dieses Verhalten gelöst werden könnte bzw. soweit minimiert, dass es kaum mehr stört?

DANKE!
Grüsse
Bernhard

Hallo,

jemand eine Idee?

Grüsse
Bernhard

Habe das selbe Problem. Evt. lässt es sich bei dir damit lösen, dass du dem Slider eine fixe Breite und vor allem Höhe gibst in den Einstellungen? Oder habe ich das Problem doch falsch verstanden.

Ja, das Problem ließe sich damit lösen, wenn man dem umgebenen Container per CSS eine Größe zuweist. Dann weiß der Browser beim Rendern wie viel Platz er dafür veranschlagen soll.

Warum der FOUT auftritt liegt daran, daß die Scripts allesamt den DOM manipulieren und deshalb erst mit $(document).ready(); gestartet werden dürfen. Da das voraussetzt, daß die HTML-Datei komplett geladen wurde und die Browser diese schon beim Laden layouten tritt das zutage. Vermeiden ginge nur durch eine Größenangabe oder durch das Verstecken des entsprechenden Parts und sichtbar machen, sobald das Script gestartet wird.

Hallo,

nein daran liegt's wohl nicht, weil ich fixe Höhe und Breite vergeben habe.

Füge im CSS mal folgendes hinzu:

PHP-Code:

---

.ce_nps.sliderAll {
    ...
    overflow:hidden;
} 


---

.ce_nps.sliderAll ist der äußerste Container des sliders, der auch eine fixe Breite und Höhe hat (im Source, nicht per JS). Allerdings fehlt eben overflow:hidden;

mit dem 'overflow:hidden' lässt sich das Problem schon eindämmen ... aber es verschwindet nun die .bx-pager, sprich die Pagination

unschön sieht auch noch aus, dass die Bilder trotzdem vorab mal alle irgendwie angezeigt werden ... man erkennt das an den sich überlagernden Bildunterschriften, die dann wie wirr angezeigt werden ...

gefällt mir so gar nicht ...

Zitat:

---

Zitat von derRenner

mit dem 'overflow:hidden' lässt sich das Problem schon eindämmen ... aber es verschwindet nun die .bx-pager, sprich die Pagination

---

Stimmt, sorry, daran hatte ich nicht gedacht.

so, zwar noch immer nicht die Lösung die ich gerne hätte, aber bei weitem schon ansehlicher als bisher.

Was habe ich gemacht:
dadurch, dass ich den slider sowieso via insert Tag in einem HTML eingefügt habe, habe ich rund um den Insert Tag noch ein DIV gelegt

Code:

---

<div class="sliderBox">
{{insert_article::meinslider}}
</div>

---

dieser .SliderBox habe ich nun die fixe Höhe (um die Höhe des pagers grösser gesetzt) und die fixe Breite bzw. ein overflow:hidden via CSS gegeben.
Nun ist der pager sichtbar und die Bilder breiten sich nur innerhalb dieser SliderBox beim Laden aus.

Nachteil: die Bilder sind noch immer im Streifen unterhalb des Sliders kurz sichtbar (in jener Höhe, wo der pager steht) - ist aber schon mal schöner, als dass man alle Bilder über den Bildschirm verteilt sieht.


Trotzdem, wie erwähnt keine optimale Lösung - wenn noch jemand Input für mich hat, so würde mich das freuen :D

Grüsse
Bernhard

Ich muss das jetzt nochmals hochschieben.

Ich habe jetzt nochmals folgendes probiert, bekomme aber leider kein Ergebnis:
Ich lasse im Artikel, dort wo ich auch den Slider als Artikel reinlade, eine php-Datei laden.

Code:

---

{{file::sliderLoad.php}}
<div class="sliderBox">
{{insert_article::npslidermodulhidden02}}
</div>

---

In der sliderLoad.php steht nichts anderes als

Code:

---

<script type="text/javascript" src="files/schmid_layout/sliderLoad.js"></script>

---

Und der Inhalt der sliderLoad.js ist

Code:

---

(function($) {
    $(document).ready(function() {
        $(".sliderBox").css('visibility', 'hidden');
    });
    $(window).load(function() {
        $(".sliderBox").css('visibility', 'visible');
    });
 });

---

Der Grundgedanke:
wenn die Seite geladen wird, dann greife aufs CSS zu und verstecke das DIV mit der Klasse .sliderBox, danach kann die Klasse .sliderBox wieder angezeigt werden.

Wie oben schon vermerkt, funktioniert das aber nicht. Ich bin jetzt in jQuery absolut nicht firn und kann damit auch nicht sagen, ob das überhaupt so möglich ist - darum meine Frage/Bitte, woran liegt's dass das nicht klappt? Bzw. was müsste wie geändert werden?


EDIT: auch im <head> bringt die sliderLoad.js kein Ergebnis ... also vermute ich mal, dass der Code falsch ist?

Erledigt!
ich denke, dass ich jetzt eine Lösung gefunden habe, mit der auch ich zufrieden bin :D

Wie bin ich vorgegangen?
im zusätzlichen <head>Tag stehen nun zwei "Komponenten":

Code:

---

<style type="text/css">
.sliderBox { visibility:hidden; }
</style>
<script type="text/javascript" src="files/schmid_layout/sliderLoad.js"></script>

---

Die .sliderBox habe ich nun mal von vornherein ausgeblendet, sodass der Slider schon mal gar nicht erscheint, solange das Laden der Seite nicht abgeschlossen ist.
Über die sliderLoad.js stelle ich die .sliderBox einerseits wieder auf visible und andererseits (da das Erscheinen noch immer "sehr hart" ausgesehen hat - im Speziellen die Bildunterschriften, das sah sehr unruhig aus) lasse ich das Einblenden mittels fadeIn ein wenig "weicher" aussehen.

Code:

---

$(document).ready(function(){
    $(".sliderBox").css('visibility', 'visible');
        $(".sliderBox").hide().fadeIn(800);
  });

---

Gesamt hat das nun einen doch sehr schönen, angenehmen Effekt (über die Browser verteilt, muss ich das noch testen, wie sich diese verhalten).

Hallo,

ich muss dieses Thema nochmals hochschieben. Wie in post #11 beschrieben habe ich mir bei diesem Problem mit ein paar jquery-Zeilen geholfen. Dies hat auch bis "soeben" super geklappt. Jetzt hatte ich heute/vorhin ein Update im Chrome-Browser und nun klappt das 'fadeIn' augenscheinlich nicht mehr ... das erste Bild "knallt" nun "hart" in den Sichtbereich.

Ich tippe aber drauf, dass dies ein Chrome-"Problem" ist, weil wie erwähnt, bis vor dem Update das 'fadeIn' noch einwandfrei geklappt hat und auch im Firefox noch gefadet wird.

Hat jemand einen Tipp für mich, wie das 'fadeIn' auch weiterhin im Chrome (Version 29.0.1547.62 m) funktionieren könnte?

Hier nochmals die Seite:
http://www.malerei-schmid.at/cms/

... ja, und die Seite sollte heute online gehen ...

so, ich denke, dass der Chrome Browser in dieser Version auch noch andere Maken hat ...
Habe jetzt mal ein wenig an der FadeIn-Zeit geschraubt und jetzt sieht's mal zumindest nicht so "hart" aus.

... mal abwarten & Tee trinken ;)