Как ускорить загрузку JS в меню header?

Question

[SiO4]

Привет. Есть раскрывающееся меню хедер и карусель товаров в нем. Хедер сделан на JS с помощью добавления/удаления класса. Карусель slick.
Дело в том, что карусель очень долго прогружается и меню пустует (секунд все 10), если убрать JS код карусели, то открывается нормально.
В чем тут может быть ошибка? Как можно добиться нормальной скорости загрузки в данном случае?

Хедер:

$(document).ready(function () {
	$(".menu_click").click(function(){ 
	   $(".header").addClass('menuactive'); 
	  });
	
	$(".close").click(function(){ 
	   $(".header").removeClass('menuactive'); 
	  });

Код карусели:

$(function () {
  $('.carousel').slick({
    arrows: false,
	slidesToShow: 4,
	speed: 300,
  });
  
  $('.carousel').mousewheel(function (e) {
    if (e.deltaY !== 1) {
      $('.carousel').slick('slickNext');
    } else {
      $('.carousel').slick('slickPrev');
    }
    
    e.preventDefault();
  });
  $(".slickprev").click(function(){ 
    $('.carousel').slick('slickPrev');
   });
   $(".slicknext").click(function(){ 
    $('.carousel').slick('slickNext');
   });

});

Answer 1

[SiO4]

Решил проблему через вызов меню css атрибутом visibility.

$(document).ready(function () {
	$(".menu_click").click(function(){ 
	   $(".header").css( 'visibility', 'visible' )
	  });
	
	$(".close").click(function(){ 
	   $(".header").css( 'visibility', 'hidden' )
	  });

Вывод: нехрен делать меню через добавление класса :)

Answer 2

[Павел]

Как вариант, не ждать загрузки всего документа, грузить меню, как только в дом появились нужные элементы и карусель...

Comments

[SiO4]

Думаю трабл не в этом, потому что средний DomContentLoaded меньше 1 секунды

Answer 3

[Евгений]

$(".menu_click").click(function(){ 
    $(".header").addClass('menuactive'); 
    $('.carousel').slick('setPosition');
});