Медленная загрузка изображений Flexslider

Я использую 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>

вопрос. Как сделать так, чтобы слайдер показывал первое изображение как можно быстрее? а потом второй и так далее.

EDIT: я решил проблему. Он представлен в правильном ответе ниже. Если у вас есть лучшее решение: Пожалуйста, поделитесь :D

22
flexslider html jquery preload

6 ответов

Ok. поэтому я нашел способ сделать это.

в css-файле flexslider добавьте эту строку

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

в строке после этой строки:

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

это заставит первое изображение появиться, и он будет ждать загрузки других изображений, прежде чем он вращается.

54

Я знаю, что это старая проблема, но у меня есть более простое решение.

найти

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

и измените селектор на

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

я быстро исправил эту проблему, добавив стиль css в таблицу стилей flexslider стиль:

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

Я нашел самый гладкий способ сделать это.

добавьте div с первым изображением слайдера перед контейнером flexslider, как это.

<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
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

Если вы установите smoothHeight как true try в режиме по умолчанию, он также может улучшить производительность

0

есть несколько способов вы можете идти.

сначала вы можете попробовать добавить скрытые теги изображения, такие как:

<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, но вы можете иметь как сложные слайды, как вам нужно.

-1