Flexslider - предзагрузчик изображений

У меня проблема с моим отзывчивым плагином flexslider. Плагин работает отлично, если у вас не много изображений в реальном слайд-шоу. Поведение при загрузке тогда просто не приемлемо.

Я надеялся, что кто-нибудь может помочь мне с помощью следующего сценария preloader для изображений flexslider, так как я не могу заставить его работать.

Вот код, который я использую:

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 в HTML-заголовке

<!-- 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;}

Любая помощь приветствуется!

Источник

5 ответов

Решение

Вместо использования объекта-слайдера из 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>
Источник

Я пытался много раз, и у меня это работало так:

<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">
Источник

Попробуйте добавить для каждого li 'style="display: none;"', кроме первого li. Он должен работать.

Источник

Мне удалось заставить его работать с помощью обратного вызова "до" вместо "запуска".

Таким образом, бит 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>
Источник

Я тоже боролся с этим, и ответ на самом деле очень прост. Единственное, что не так в вашем коде, это:

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

А в вашем css вы определяете для загрузки класс.loading

Таким образом, вы должны изменить классы для этого div. Как это:

<div class="loading" style="overflow-x: hidden; overflow-y: hidden; ">
Источник
Другие вопросы по тегам