Flexsliderスローイメージロード

Question

私が構築しているウェブサイトでFlexsliderを使用しています。

私は応答性が非常に気に入っています。なぜなら、私はnivo-sliderやそれに類するものに変更することを躊躇していないからです。

すべての画像がロードされる前に最初の画像が表示されないということは否定です。だからあなたは、サイトが正しく見えるように、スライダのすべての画像がロードされるまで待たなければなりません。これは、デスクトップ/ラップトップでは許可されますが、モバイルデバイスでは許可されません。

私は同様の質問をここで見つけましたFlexslider - image preloaderしかし、私はそれを動作させることができませんでした。

私は質問があるコードの私のHTMLで

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

そしてこの

   <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> 

をトリガするためにこれを使用します。できるだけ早くスライダに最初の画像を表示させるにはどうすればよいですか？次に2番目のように。

EDIT：問題を解決しました。それは以下の正解で提示されます。より良い解決策をお持ちの場合：D

Answer 1

私はそれを行う方法を見つけました。 flexsliderのCSSファイルで

この行の後の行で、この行

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

を追加：最初の画像が表示され、それがロードする他の画像を待つことになるでしょう

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

それが回転する前に。私はすぐにflexsliderスタイルシートでスタイルをCSSスタイルを追加することによってこの問題を解決している

Answer 2

あなたにはいくつかの方法があります。

まず次のような隠された画像タグの追加を試みることができる：あなたのイメージをプリロードする

<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レイアウトを少し変更する必要がありますが、必要に応じて複雑なスライドを作成できます。

Answer 3

は次のとおりです。

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

Answer 4

私は、これは古い問題である知っているが、私は簡単なソリューションを持っています。

私が見つけたあなたがデフォルトモードで真の試みとしてsmoothHeightを設定した場合、それはまた

Answer 5

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> 

その後initalizationをflexsliderするには、次のコードを追加します。

Answer 6

を、パフォーマンスを向上させることができ

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

を見つけ、

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