Как сделать чтобы прелоадер срабатывал на каждой карточке товара?

Question

[Вадим Ягофаров]

Добавил прелоадер на каждую карточку товара(вернее на модальное окно которое прикреплено к каждой карточке товара и в нутри слайдер)

<div class="modal fade" id="product" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                        
                      <div class="modal-dialog" role="document">
                        <div class="modal-content">
                          <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                              <span aria-hidden="true">&times;</span>
                            </button>
                          </div>
                          <div class="modal-body">
                                <div id="before-load1">
                                  <!-- Иконка Font Awesome -->
                                  <i class="fa fa-spinner fa-spin"></i>
                                </div>
                          <div class="slider__prod">
                              [[getImageList?
                                    &tvname=`typesp`
                                    &tpl=`@CODE: 
                                    <div class="stock__item">
                                        <div class="stock__item_head">
                                            <div class="stock__item_head-name">[[+name]]</div>
                                            <div class="stock__item_head-size">[[+size]]</div>
                                        </div>
                                        <div class="stock__item_img text-center">
                                            <img src="[[+image]]" alt="">
                                        </div>
                                        <div class="prod_btn text-center mt-4">
                                            <a href="" data-toggle="modal" data-target="#exampleModal">Заказать такой же!</a>
                                        </div>
                                        <!-- <div class="stock__item_price">
                                            <div class="stock__item_price-old">[[+oldprice]]</div>
                                            <div class="stock__item_price-new">[[+newprice]]</div>
                                        </div> -->
                                    </div>`
                                ]]
                           
                            </div>
                          </div>

Прелоадер срабатавает но всего один раз, после закрытия модального окна и его повторного открытия он не срабатывает

var num = 1;
    $('.b1').on('click', function (e) {
      num = parseInt($(this).data('num')); 
    })
    
    $('.modal').on('shown.bs.modal', function () {
       
             $('#before-load1').find('i').fadeOut().end().delay(400).fadeOut('slow');
       
          $('.slider__prod').slick({
            initialSlide: num-1,
            arrows: true,
            centerPadding: 0,
            accessibility: false,
            prevArrow: '<button class="slick-prev slick-arrow" aria-label="Prev" type="button" style=""><i class="fa fa-chevron-left" aria-hidden="true"></i></button>',
            nextArrow: '<button class="slick-next slick-arrow" aria-label="Next" type="button" style=""><i class="fa fa-chevron-right" aria-hidden="true"></i></button>',
            responsive: [
                          {
                            breakpoint: 770,
                            settings: {
                              arrows: false,
                              centerMode: true,
                            }
                          }
                        ]
            }).on('setPosition', function(event, slick) {
              slick.$slider.css({
                opacity: 1,
                visibility: 'visible'
              });
            
    });
});
 

    $('.modal').on('hidden.bs.modal', function (e) {
        $('.slider__prod').slick('unslick');
    })

Как сделать что прелоадер срабатывал после закрытия и повторного открытия любой карточки товара. вот сайт

Answer 1

[nvdfxx]

ссылку на фиддл дайте, пожалуйста, никто не будет в этом полотне выискивать ошибки/решения

Comments

[Вадим Ягофаров]

добавил

[nvdfxx]

а зачем вам прелоадер, если у вас ничего не догружается асинхронно?

[Вадим Ягофаров]

nvdfxx, я хотел скрыть прелоадером дергание слайдера. когда кликаешь на модалке слайдер формируется сначала вертикально и потом горизонтально. и это дергание заметно особенно при плохом интернете. Я не нашел другого способа. Если есть другой способ это исправить, то буду очень признателен

[nvdfxx]

Вадим Ягофаров, инициируйте слайдер не в момент открытия модального окна, а при загрузке страницы