Как сделать нормальную прогрузку?

Question

[Minningt]

Привет всем. Не знаю как правильно задать вопрос, поэтому объясню ситуацию:
Скачал и установил себе слайдер kenwheeler.github.io/slick Застилизировал его под себя, настроил, но проблема заключается в том, что когда сайт грузится этот слайдер не до конца прогружается и такое ощущение, что всё полетело. Но после загрузки всей страницы он(слайдер) становится на свое место и функционирует нормально.
На скриншоте отображен тестовый вариант как этот слайдер прогружается - i72.fastpic.ru/big/2015/0819/76/38ba5afd5ab921d8ac...
Самое забавное, что на странице ничего нет кроме самого слайдера. А представьте, если будет приличный контент или медленный интернет у пользователя? Нужно как-то пофиксить это. Кто подскажет, что сделать с этим?

jsfiddle.net/L3mLemfx/1 - живой пример(изменены картинки)

Answer 1

[Виталий Инчин ☢]

Банальная проблема.
Используйте прелоадеры или просто:

body{
   opacity: 0;
   transition: opacity 1s;
}

window.addEventListener("load", function(){
    document.body.style.opacity = 1;
});

Comments

[Minningt]

Спасибо. А как добавить картинку во время загрузки под ваш скрипт?

[Виталий Инчин ☢]

Minningt: к примеру, так: jsfiddle.net/In4in/0Lc944nj/2

[Minningt]

Виталий Инчин: у меня почему-то появляются эти шарики параллельно с загрузкой страницы. Они не отображаются в момент загрузки страницы.

[Виталий Инчин ☢]

Minningt: давайте сделаем так: jsfiddle.net/In4in/0Lc944nj/4
У вас страница просто очень быстро загружается. А для прелоадеров не используют простые картинки. SVG, Canvas и цвета, но не картинки - им ведь тоже нужно время на загрузку.

[Minningt]

Все, сделал. Добавил z-index

[Minningt]

Виталий Инчин: наоборот. Не сильно быстро) Правда 1 минус - лагает гифка при загрузке страницы. Это из-за gif?

[Виталий Инчин ☢]

Minningt: от браузера/тех.характеристик зависит, думаю.

[Minningt]

Виталий Инчин: ясно. Спасибо за помощь

Answer 2

[me2you]

Лучше положите код на jsfiddle.net
Так вам быстрее помогут.

Comments

[Minningt]

jsfiddle.net/L3mLemfx/1 - положил. Заменил только картинки

[me2you]

Minningt: Хмм, в этом примере у меня ничего не моргает... Пусть еще кто-то посмотрит.

[Minningt]

me2you: потому что инициализация идет на таких ресурсах. Поэтому и не моргает.

[me2you]

Minningt: вы хотите добиться кода как в примере с заголовком - Slider Syncing? Один большой слайд, а снизу мелкие превьюшки?

[Minningt]

me2you: в первом посте разве не понятно я рассказал? Иначе, к сожалению, не могу. На гифке показано, что в момент загрузки странички можно увидеть, что слайд "съезжает", но после полной загрузки страницы - все нормально становится.