Ladedummy für responsive Slider - wie?

Hallo,

in meinem aktuellen Kundenprojekt (responsiv mit Contao 3) verwende ich in der Desktop-Version den WooThemes-FlexSlider. Funktioniert auch super. Allerdings besteht mein Kunde darauf, dass ca. 10 Bilder (und natürlich auch noch in bester Optik) dargestellt werden. Die Ladezeiten sind natürlich entsprechend (langsam). Da der Höhe des Header's wegen dem responive Design nicht fest ist, springt natürlich das Aussehen der Website während, bzw. nach dem Laden Bilder. Kann ich das Springen mit einem Dummybild eventuell verhindern?

Unter 'Springen' mein ich natürlich die Änderung der Höhe des Headers, vor dem und nach dem Laden der Bilder. Man sieht dies natürlich nur bei einer relativ langsamen Internetverbindung.

Ich versuch mal morgen einige Bilder einzustellen, die mein Problem vielleicht besser darstellen.


MfG
Harry

Gebe den Slider doch eine Mindest Höhe mit min-height.

Wie die "min-height"-Angabe für Responsive nützlich sein soll ist mir ein Rätsel...

@buddla: Hast du mittlerweile eine Lösung gefunden?

Zitat:

---

Zitat von ToNoma

Wie die "min-height"-Angabe für Responsive nützlich sein soll ist mir ein Rätsel...

---

Und mir ist dieser Satz ein Rätsel. Was hat das eine mit dem anderen zu tun? Die Antwort war korrekt und wäre ich der Threadersteller gewesen auch absolut hilfreich.

Das mit der min-height führt vielleicht bei kleinen Bildern zum gewünschten Ergebnis...
Wenn ich aber große Bilder hab und ich will auch die vollen Responsive-Eigenschaften des Flexsliders nutzen dann soll sich das Bild gemäß der Fenstergröße des Browsers anpassen, für die Höhe wie die Breite des Bildes.
Variante1:
Für mich ist es keine Option dem Bild selbst eine min-height zu geben. Wahrscheinlich wird das Bild dann nur in der Breite an die Fenstergröße angepasst und die Höhe des Bilds bleibt gleich? Dann wird entweder beschnitten oder verzerrt.
Variante2:
Wenn ein Container in dem der Flexslider ist eine min-height bekommt, bleibt der Container in dem der Flexslider ist immer mindestens so hoch wie es in min-height angegeben ist.
Wenn man dann das Browserfenster verkleinert, wird das Bild zusammen mit dem Browserfenster verkleinert. Der Container würde sich gleichzeitig auch verkleinern, da er keine height oder width angaben hat.
Durch die min-height wird aber nur die Breite verkleinert, nicht die Höhe. Wenn man also Content unter dem Felxslider hat, wächst der Abstand zwischen dem Bild und dem Content.

Ich hoffe man konnte meiner Theorie folgen... Vielleicht stell ich mir das auch falsch vor... Für Einwände und vor allem für eine gute (ausführliche!) Erklärung wie das Problem zu lösen ist, bin ich gerne offen.

Evtl. könnte es helfen die min-height für die wichtigsten Auflösungen als einzelne Mediaquerys einzubauen ;)

Beispiel:

@media (min-width: 950px) {
/* breite Browserfenster */
.dein_slider {
min-height: 400px;
}
}
@media (min-width: 450px) and
(max-width: 950px) {
/* Darstellung auf Netbooks */
.dein_slider {
min-height: 200px;
}
}
@media (max-width: 450px) {
/* mobile Geräte */ }
.dein_slider {
min-height: 100px;
}
}

Ich hab eine sehr einfache Lösung mit einer Zeile CSS gefunden:

Das:

Code:

---

.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}

---

hinter der Zeile mit:

Code:

---

.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}

---

einfügen.

Quelle: http://stackoverflow.com/questions/1...low-image-load