Разное (Без рубрики)

Как сделать preloader для карусели (слайдера) Slick?

Опубликовано в от Admin
Как сделать preloader для карусели (слайдера) Slick? | Карусель Slick
05
Ноя

Недавно столкнулся с проблемой ранней загрузки картинок слайдера до инициализации  плагина карусели «Slick«. Дело в том, что библиотека jQuery и скрипты плагина и его инициализации происходят в нижней части страницы. Следовательно, сформированный HTML-код беспрепятственно отрисовывается при рендере страницы и лишь после этого происходит инициализация и подхватывается функционал плагина, изображения слайдера выстраиваются в ряд и все выглядит прекрасно…

Но на долю секунды посетитель сайта видит не приятную картину — изображения слайдера отображаются друг под другом. Данную проблему описывал один из пользователей на форуме вопросов и ответов «Тостер»:

Для показа слайдов/банеров использую slick slider. Проблема в том, что при загрузке страницы возникает секундное появление всех картинок слайдер в столбик, и только после их полной загрузке формируется слайдер. Выглядит очень неопрятно. Как вы обычно делаете preloader для слайдера, который сначала формируется, а только потом отображает картинки?

Есть много вариантов решения данной задачи:

  • грузить в верхней части скрипты и стараться инициализировать плагин после разметки HTML слайдера,
  • воспользоваться сторонним плагином, например, imagesLoaded и до полной загрузки страницы и инициализации всех плагинов отображать тот самый preloader (прелоадер), как правило в виде анимации.

Но есть , пожалуй, самый простой способ, который гарантированно позволит не отображать ничего лишнего до момента пока плагин карусели не проинициализирует тот или иной селектор. И воспользуемся мы только одним методом библиотеки  jQuery — removeClass()

На примере CMS WordPress это будет выглядеть следующим образом:


wp_add_inline_script( 'slick', "jQuery(document).ready(function(){
  $('#front-slider').slick({
    dots: true,
    infinite: true,
    arrows: true,
    slidesToShow: 1,
    slidesToScroll: 1,
    focusOnSelect: true,
    lazyLoad: 'ondemand',
  });

  $('#front-slider .slide').removeClass( 'd-none' );
});" );

Давайте немного разберем этот снипет. Первая строчка — это функция «WordPress», которая добавляет наш скрипт после зависимого скрипта, который мы указали первым аргументом, далее, вторым аргументом, идет JS-функция инициализации нашего слайдера в определенном селекторе «#front-slider». А вот предпоследняя строчка эта и есть наш трюк! С помощью метода библиотеки jQuery — «removeClass()» мы удаляем CSS-класс из нашего слайдера, который , как можно догадаться, скрывал его, то есть имел свойство и значение display: none;.

Этот способ гарантирует что слайдер не отобразится до тех пор, пока не проинициализируется.
Любителям чистого JavaScript посвящается этот снипет:

<script>
function myFunction() {
   var element = document.getElementById("myDIV");
   element.classList.remove("mystyle");
}
</script>

JS-функция достаточно проста. Мы «кладем» в переменную element нужный селектор, а затем следующим действием, обратившись к свойству classList, методом remove удаляем класс, у которого было значение свойства display: none;. Вот и вся магия 🙂

Admin