web-dev-qa-db-ja.com

Flexsliderの遅い画像読み込み

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

私は応答性が非常に好きであり、それが私がニボスライダーまたは同様のものに変更したくない理由です。

欠点は、すべての画像が読み込まれる前に最初の画像が表示されないことです。したがって、スライダーがロードされると、サイトが適切に表示されるようになるまで待つ必要があります。これはデスクトップ/ラップトップでは許容されますが、モバイルデバイスでは許容されません。

ここで同様の質問を見つけました 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>

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

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

jqueryhtmlpreloadflexslider
22
Alfred Larsson

OK。だから私はそれを行う方法を見つけました。

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

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

この行の後の行で：

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

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

55
Alfred Larsson

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

見つける

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

セレクターを

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

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

このように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();
    }
  });
});
1
Uğur Taşdildiren

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

.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
1
Gurwinder Singh
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

あなたがsmoothHeightをtrueに設定した場合、デフォルトモードで試してみてください

0
Mehmet Eren Yener