PavelUstyugov
@PavelUstyugov
мы целый отряд, выходящих под этой учеткой сюда.

Как сделать чтобы у слайдера сначала загружался только один слайд?

На сайте в шапке есть слайдер с большим числом слайдов. Из-за этого сайт долго загружается.
slick-slider

Есть идея сделать так чтобы сначала загружался только один слайд, а потом - когда сайт загрузится полностью чтобы появлялись остальные слайды.
Как бы это сделать?
Lazy Load - это вроде как не то.
сам сайт вот:
вот
  • Вопрос задан
  • 93 просмотра
Пригласить эксперта
Ответы на вопрос 2
1) Как раз-таки используйте отложенную загрузку, в slick-slider она работает из коробки. При этом в html у вас в изображениях вместо src будет аттрибут data-lazy, поэтому при загрузке страницы никакие слайды загружаться не будут.
<!-- у всех слайдов меняете src на data-lazy -->
<img data-lazy="img/lazyfonz1.png">

// добавляете параметр lazyLoad при инициализации
$('.main__slider').slick({
  ...
  lazyLoad: 'ondemand', // или 'progressive' (https://stackoverflow.com/questions/25726554/lazy-loading-progressive-vs-on-demand)
  ...
});

2) Можете сделать инициализацию слайдера после загрузки документа
$(document).ready(function(){
  $('.your-class').slick({
    setting-name: setting-value
  });
});

но тогда возможно "скакание" верстки, ведь сначала блок имел нулевую высоту, а потом уже конкретную. В этом случае можете стилями сразу задать этому блоку нужную высоту.
Ответ написан
OtshelnikFm
@OtshelnikFm
Мои работы: otshelnik-fm.ru
1-ю картинку в img тег. Все остальные в data-your-name атрибут, а в img однопиксельную заглушку в svg.
По событию onload или ready - всё это дело в img атрибут переносишь.

По сути тот же lazy load - но для слайдеров.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Gaskar Group Москва
от 120 000 ₽
Cloud4Y Ярославль
от 65 000 до 130 000 ₽
CSSSR Ростов-на-Дону
До 170 000 ₽
18 февр. 2020, в 23:53
8000 руб./за проект
18 февр. 2020, в 22:14
10000 руб./за проект