フレックススライダー - 画像プリローダー

Question

レスキューフレックススライダーのプラグインに問題があります。実際のスライドショーに多くの画像がない限り、プラグインは正常に動作します。ローディングの振る舞いは許容できません。

私はそれがうまく動作しないので、誰かが次のフレックススライダーイメージプリローダースクリプトで私を助けてくれることを願っていました。ここで

は、私が使用しているコードです：HTMLの頭の中で

FLEXSLIDER HTML

<div class="slider"> 
    <div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; "> 
     <ul class="slides" style="width: 5200%; -webkit-transition-duration: 0s; -webkit-transform: translate3d(-9702px, 0px, 0px); "> 

     <li style="float: left; display: block; width: 940px; "> 
     <img src="image1.jpg"> 
     </li> 
     <li style="float: left; display: block; width: 940px; "> 
     <img src="image2.jpg"> 
     </li>      
     <li style="float: left; display: block; width: 940px; "> 
     <img src="image3.jpg"> 

     </ul> 

    </div> 

FLEXSLIDER SCRIPT

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
    animation: "slide",   
    slideshow: false, 
    controlsContainer: ".slider" 

    start: function(slider) { 
    slider.removeClass('loading');} 

     }); 
});      

</script> 

FLEXSLIDER.CSS

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center;} 

すべてのヘルプ感謝しています！

Answer 1

flexsliderのスライダオブジェクトを使用する代わりに、スライダ要素自体をjQueryオブジェクトにしてみてください。

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     var target_flexslider = $('.flexslider'); 
     target_flexslider.flexslider({ 
      animation: "slide", 
      slideshow: false, 
      controlsContainer: ".slider", 

      start: function(slider) { 
       target_flexslider.removeClass('loading'); 
      } 

    }); 

});      
</script> 

Answer 2

「開始」ではなく「前」のコールバックを使用して動作させることができました。

だから、JSのビットは次のようになります。

<!-- FlexSlider --> 
<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
     $('.flexslider').flexslider({ 
     animation: "slide", 
     slideshow: false, 
     controlsContainer: ".slider" 

     before: function(slider) { 
      slider.removeClass('loading'); 
     } 
     }); 
    });      

</script> 

Answer 3

私は多くの時間のためにしようと、私にとっては、このように働いた：

<script type="text/javascript" charset="utf-8"> 
    $(window).load(function() { 
    $('.flexslider').flexslider({ 
     start: function(slider) { 
      slider.removeClass('loading'); 
    } 
}); 
}); 
</script> 

そしてflexslider.css

.loading {min-height: 300px; background: url('loader.gif') no-repeat center center !important;} 

に"重要な"部分に注意してください。これは、flexsliderのデフォルトの白い背景と衝突していたために機能しませんでした。私はhtmlのように設定しました

<div class="flexslider loading"> 

Answer 4

最初のliを除いて、それぞれli 'style = "display：none;"'を追加してみてください。それは動作するはずです。

Answer 5

私もこれで苦労していましたが、答えは実際にはとても簡単です。

<div class="flexslider loading" style="overflow-x: hidden; overflow-y: hidden; "> 

そして、あなたのCSSにあなたはあなたがそのdivのためのCLASを変更する必要があります

を.loadingクラスをロードするための定義：あなたのコードで間違っている唯一のものはこれです。

<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">