Flexslider緩慢圖像加載

我在我正在建設的網站上使用Flexslider。Flexslider緩慢圖像加載

我喜歡的響應非常多，那我不wan't更改爲NIVO滑塊或類似的東西的原因。

負大約它是被裝載的所有圖像之前不顯示所述第一圖像。因此，您必須等待加載滑塊中的所有圖像才能使網站正常顯示。這是可以接受的桌面/筆記本電腦，但不是在移動設備上。

我發現了一個類似的問題在這裏Flexslider - image preloader但我無法得到它的工作。

我使用它來觸發代碼

$(window).load(function() { 
     $('.flexslider').flexslider(); 
    });

這在我的HTML

   <ul class="slides">    
       <li> 
        <img src="pictures/slide1.jpg" alt=" "> 
       <li> 
        <img src="pictures/slide2.jpg" alt=" ">       
       </li> 
       <li> 
        <img src="pictures/slide3.jpg" alt=" "> 
       </li> 
       <li> 
        <img src="pictures/slide4.jpg" alt=" "> 
       </li> 
      </ul>

的問題是。我如何使滑塊儘可能快地顯示第一幅圖像？然後第二個等等。

編輯：我解決了這個問題。它顯示在下面的正確答案中。如果你有一個更好的解決方案：請分享一下：d

來源

2012-10-03 Alfred Larsson

好的。所以我找到了一個辦法。

在flexslider css文件

在該行添加此行

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

此行之後：

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

，這將使第一形象出現，它會等待其他圖像加載在它旋轉之前。

來源

2012-10-04 13:03:11

這對我很好，謝謝！ –

這給了我一個錯誤的地方，一瞬間圖像變形和拉伸，似乎在圖像加載完成時發生。 – Jeger

在哪個瀏覽器中？我看不到它 –

-1

有一對夫婦的方式，你可以走了。

首先，你可以嘗試添加隱藏圖像標記，如：

<img src="pictures/slide1.jpg" style="display:none"> 
<img src="pictures/slide2.jpg" style="display:none"> 
<img src="pictures/slide3.jpg" style="display:none"> 
<img src="pictures/slide4.jpg" style="display:none"> 
<ul>...your slides...</ul>

預先載入圖像。然而，我會建議不要這種方法。

它很快就會顯示出你的內容（但尚未與IE6測試）的另一種解決方案是使用在https://github.com/ozzyogkush/jquery.contentSlider發現滑塊。這是我一直在開發的滑動窗口小部件，效果很好。這需要對DOM佈局稍作修改，但您可以根據需要製作複雜的幻燈片。

來源

2012-10-03 21:30:28 Derek

對不起，沒有工作。我真的不想從flexslider改變。 –

我也很快在flexslider樣式表添加CSS風格樣式修復此問題是：

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}

來源

2013-05-04 06:14:25

謝謝。這對我有好處。 – johnny

我知道這是一個老問題，但我有一個簡單的解決方案。

查找

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

如果設置smoothHeight爲真嘗試在默認模式下則可以提高性能也

來源

2013-06-02 16:32:01

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

最平滑的方式來做到這一點。

在flexslider容器之前添加一個帶滑塊第一個圖像的div。

<div class="pre-flexslider-container"> 
    <img src="slider.jpg"> 
</div> 
<div class="main-flexslider-container" style="display: none"> 
    <div class="flexslider"> 
    . 
    . 
    . 
    </div> 
</div>

然後添加以下代碼flexslider initalization：

來源

2015-12-24 09:11:33

我發現選擇更改爲

.flexslider .slides > li:not(:first-child)

來源

2016-01-22 16:08:31

這一個實際上幫助了我，tnx。 Css解決方案顯示第一個隱藏的幻燈片，但它已經有33％的寬度，我想我有flexslider的舊版本或新版本。 –

Flexslider緩慢圖像加載

回答

相關問題