Я использую 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
Ok. поэтому я нашел способ сделать это.
в файле flexslider css добавьте эту строку
.flexslider .slides > li:first-child {display: block; -webkit-backface-visibility: visible;}
в строке после этой строки:
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
Это приведет к появлению первого изображения, и он будет ожидать загрузки других изображений до того, как он начнет вращаться.
Я знаю, что это старая проблема, но у меня есть более простое решение.
Find
.flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;}
и измените селектор на
.flexslider .slides > li:not(:first-child)
Я быстро исправил эту проблему, добавив стиль css в таблицу стилей flexslider:
.flexslider .slides > li a img{visibility:visible !important; opacity:1 !important;filter:alpha(opacity=100) !important;}
Я нашел самый гладкий способ сделать это.
Добавьте 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();
}
});
});
smoothHeight: false //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode
если вы устанавливаете smoothHeight как истинную попытку в режиме по умолчанию, тогда она может повысить производительность также
Есть несколько способов, которыми вы можете пойти.
Сначала вы можете попробовать добавить скрытые теги изображений, например:
<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, но вы можете иметь как сложные слайды по мере необходимости.