Flexslider не загружает первый слайд в Chrome + Safari

0

iamjen.me/yercheck

Поэтому я использую это на своем новом сайте выше и пробовал все решения, показанные в этом потоке: Flexslider замедляет загрузку изображения (отдельно, конечно), но проблема по-прежнему сохраняется в Chrome и Safari. Однако, в FF и на мобильных устройствах, вещи загружаются красиво (я еще не тестировал на ПК). Сейчас у меня есть решение Альфреда Ларсона. Я пробовал каждый с настройкой initDelay в js и без него, потому что в моем случае первый слайд вообще не показывался - он прыгал прямо ко второму, поэтому я попытался отложить, чтобы я мог хотя бы увидеть первый слайд, В настоящее время initDelay установлен на 1400 мс, что нежелательно, но это лучший вариант, который у меня есть, пока я не смогу решить большую проблему с загрузкой.

Здесь приведенный выше код из flexslider.css:

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

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

Мой HTML довольно безобидный:

<div id="home-slider" class="flexslider">           

<ul class="slides styled-list">

<li class="home-slide"><p class="home-slide-content">
I like things that are<span class="highlight"> easy to use</span></p></li>

<li class="home-slide"><p class="home-slide-content">
I <span class="highlight"><i class="icon-heart"></i></span> technology</p></li>

<li class="home-slide"><p class="home-slide-content">
I think <span class="highlight">failure</span> gets a bum rap</p></li>

<li class="home-slide"><p class="home-slide-content">
And I totally <span class="highlight">dig</span> end users</p></li>

</ul>
</div><!-- END FLEXSLIDER -->

Любые советы о том, почему он все еще не работает в Chrome и Safari, но загружает, как ожидалось, в FF и на мобильном? Это явно не проблема с весом сайта, поэтому я в тупике. Благодарю!

  • 0
    Я не вижу проблемы под ПК с chrome / safari / firefox.
  • 0
    загружается ли он сразу, или вы видите изображение перед загрузчиком, а затем белый экран за пару секунд до загрузки изображения? Так как я установил initDelay на 1400 мс, первый слайд должен отображаться сейчас, но задержка показа всей вещи действительно плохая.
Показать ещё 1 комментарий
Теги:
flexslider

2 ответа

1

После тщательного изучения javascript и CSS (я и несколько других) вещи просто не складывались. Наконец, я взял свой код index.html и оригинальный код темы Jarvis и по отдельности сравнил код, чтобы узнать, где были основные отличия.

Послушай, я изолировал проблему в самых невероятных местах! Короткий код встраивания видео, содержащий тему, вызывает проблемы после определения источника. Я думаю, что он имеет отношение к размеру видео, и он пытается в основном загрузить видео до того, как отобразит слайдер (код ниже).

<div class="sixteen columns">
<h3>Responsive Video</h3>  
<iframe src="http://player.vimeo.com/video/34234286?color=f2eee5" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" id="fitvid600154"></iframe>
</div>

Удалите iframe embed, и видео загрузится отлично (хотя тогда были некоторые проблемы с дисплеем css, но они легко решаются). Замените его, и проблемы с загрузкой вернутся. Я не знаю, где в javascript исправить это, поэтому, если кто-нибудь знает, как исправить это, пока отображается слайдер, пока это еще загружается, это было бы здорово.

Поделиться
0

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

в CSS, где ваш код flexslider ищет

.flexslider .slides > li {
    display: list-item;
    min-height: 583px;
    -webkit-backface-visibility: hidden;
}

Теперь это работает для меня, потому что все мои начальные изображения имеют одинаковое измерение, поэтому я устанавливаю минимальную высоту в общий размер запуска для изображений. Например, если все ваши изображения, с которых вы начинаете, имеют высоту 600 пикселей, установите минимальную высоту 600 пикселей.

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

Я добавил следующее для разных точек разлома в зависимости от высоты исходного изображения

@media (max-width:1199px) {
    .flexslider .slides > li {
        min-height: 451px;
    }
}

@media (max-width:979px) {
    .flexslider .slides > li {
        min-height: 516px;
    }
}

@media (max-width:767px) {
    .flexslider .slides > li {
        min-height: 435px;
    }
}

@media (max-width:640px) {
    .flexslider .slides > li {
        min-height: 311px;
    }
}

@media (max-width:480px) {
    .flexslider .slides > li {
        min-height:  218px;
    }
}

@media (max-width:420px) {
    .flexslider .slides > li {
        min-height: 218px;
    }
}

Это немного исправление для взлома, но оно сработало для меня и может помочь кому-то другому, желающему преодолеть ошибку сафари, проверить мой сайт и раздел портфолио на www.christiantomiak.com/portfolio3.html, причина для начала на домашней странице есть предварительный загрузчик изображений, который также работает, чтобы преодолеть эту ошибку, но не если кто-то не приземляется на домашней странице.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню