Слайдер отображает кашу рисунков при загрузке

Тема в разделе "JavaScript", создана пользователем woxel, 11 окт 2015.

Модераторы: ZiX
  1. woxel

    woxel Постоялец

    Регистр.:
    12 май 2013
    Сообщения:
    58
    Симпатии:
    24
    Нашел неплохой такой скрипт FractionSlider, на сайте разработчика - он нормально работает.
    А у меня при загрузке скрипта (в течении работы прелоадера - снизу на странице отображаются все рисунки) какая-та каша изображений.
    Но как только слайдер полностью загрузится, то показывает вполне нормально!
    пример выложил тут.

    Попросили сделать слайдер на сайт, а я второй день туплю. Не могу понять причину не очень приятной предзагрузки.
     
  2. funnywheel

    funnywheel WordPress developer

    Регистр.:
    6 авг 2010
    Сообщения:
    199
    Симпатии:
    126
    Причина - время инициализации слайдера. Пока яваскрипт не загрузится и не отработает - красивой картинки не увидите (в целом в это время отображается прелоадер)

    Лечение - overflow: hidden для контейнера слайдера.
     
    Последнее редактирование: 12 окт 2015
    woxel нравится это.
  3. Black#FFFFFF

    Black#FFFFFF

    Регистр.:
    19 июл 2007
    Сообщения:
    175
    Симпатии:
    107
    Лечение прописано не верно немного. Точнее не полно.
    1) отверстайте в css нормальный вид без js
    2) задавайте overflow: hidden; opacity: 0; и фиксированную высоту (высота слайдера обычно заранее известна)
    3) после инициализации слайдера задайте opacity: 1; как вариант.
    При этом страница не будет дергаться. Установка opacity в отличии от display: none не повлияет на внутренние расчеты слайдера.
    Удачи в труде!
     
    ILKABU нравится это.