Недавно столкнулся с проблемой ранней загрузки картинок слайдера до инициализации плагина карусели «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;. Вот и вся магия 🙂