2014-06-09 54 views
0

我使用Flexslider根據父元素寬度計算圖像大小,這使得它響應,因爲它在您更改瀏覽器大小時調整大小。在頁面加載時爲滑塊圖像保留垂直空間

我遇到的問題是,當我加載頁面,你會看到一個可憐的滑塊,直到圖像被加載,這使得它看起來很糟糕。但是,如果您轉到flexslider站點http://www.woothemes.com/flexslider/,您會看到它有一個加載器。

在flexslider中是否有選項可以自動執行此操作?我找不到一個。

+0

對滑塊容器使用'min-height'和'min-width' ...... – mostafaznv

回答

1

嘗試給

最小高度


最小寬度使用CSS要在其中具有所述圖像,使得在div塊

它可能至少不會崩潰

0

在flexslider樣式表中,他們給.flexslider a min-height280px,並使用gif加載圖像作爲其background。你應該使用它。你的問題將得到解決。

+0

問題是我必須爲所有不同的屏幕分辨率設置最小高度,因爲我不知道在哪個設備將被加載。 – Flupkear

+0

爲什麼你需要爲每個分辨率設置最小高度?設置最小最小寬度。加載圖像時,父級會自動重新調整大小。或者在DOM準備就緒時使用jQuery設置動態最小寬度。雖然我會強烈勸阻這種方法。最好使用最小高度的CSS。 –

+0

我最終手動設置了每個分辨率的高度,因爲在較小的屏幕中滑塊尺寸會更小,並且我仍然需要在從手機加載頁面時保留垂直空間 – Flupkear