22

構築しているWebサイトでFlexsliderを使用しています。

私は応答性がとても好きで、それが私がnivo-sliderまたは同様のものに変更したくない理由です。

マイナス面は、すべての画像が読み込まれる前に最初の画像が表示されないことです。したがって、サイトが正しく表示されるようにするには、スライダー内のすべての画像が読み込まれるまで待つ必要があります。これはデスクトップ/ラップトップでは受け入れられますが、モバイルデバイスでは受け入れられません。

Flexslider-画像プリローダーで同様の質問を見つけましたが、動作させることができませんでした。

これを使用してコードをトリガーします

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

質問は。スライダーに最初の画像をできるだけ早く表示させるにはどうすればよいですか？次に2番目など。

編集：私は問題を解決しました。それは以下の正解に示されています。より良い解決策がある場合：共有してください：D

4

6 に答える 6

56

Ok。それで私はそれをする方法を見つけました。

flexslidercssファイルにこの行を追加します

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

この行の後の行で：

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

これにより、最初の画像が表示され、他の画像が読み込まれるのを待ってから回転します。

于 2012-10-04T13:03:11.830 に答える
6

私はこれが古い問題であることを知っていますが、私にはもっと簡単な解決策があります。

探す

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

セレクターをに変更します

.flexslider .slides > li:not(:first-child)
于 2013-06-02T16:32:01.023 に答える
1

flexsliderスタイルシートにcssスタイルを追加することで、この問題をすばやく修正しました。スタイルは次のとおりです。

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
于 2013-05-04T06:14:25.790 に答える
1

私はこれを行う最もスムーズな方法を見つけました。

このように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の初期化に次のコードを追加します。

$(window).load(function(){
  $('.flexslider').flexslider({
    .
    .
    .
    .
    .
    start: function(slider){
        $('.pre-flexslider-container').css("display","none");
        $('.main-flexslider-container').css("display","block");
        slider.resize();
    }
  });
});
于 2016-01-22T16:08:31.847 に答える
0 
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

SmoothHeightをtrueに設定すると、デフォルトモードで試して、パフォーマンスを向上させることもできます

于 2015-12-24T09:11:33.303 に答える
-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-03T21:30:28.583 に答える