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

Я использую Flexslider на веб-сайте, который я создаю.

Мне очень нравится реакция, и поэтому я не хочу менять ниве-слайдер или что-то подобное.

Отрицание в том, что оно не отображает первое изображение перед загрузкой всех изображений. Поэтому вам нужно подождать, пока все изображения в слайдерах будут загружены, чтобы сайт выглядел правильно. Это приемлемо на рабочем столе/ноутбуке, но не на мобильном устройстве.

Я нашел аналогичный вопрос здесь 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

Ответ 1

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

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

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

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

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

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

Ответ 2

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

Find

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

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

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

Ответ 3

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

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

Ответ 4

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

Добавьте 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();
    }
  });
});

Ответ 5

smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode

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

Ответ 6

Есть несколько способов, которыми вы можете пойти.

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

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