Кто-нибудь знает, как автоматизировать функции с массивами

Question

Я делаю галереи для компании, занимающейся входной дверью, но слишком большое количество изображений внутри каждого всплывающего окна приводит к длительному времени загрузки и не отображает много изображений, пока все изображения не загружены. Я пытался в течение недели ссылаться на массивы и многомерные массивы на $ (this), но я очень плохо знаком с этим и его сложностью. Буду очень признателен за любую помощь.

STYLE

.door_img_content{
    margin: 20px;
    border: 1px solid #CCC;
    border-radius: 10px;    
}
.door_images {
    margin: 55px 0 35px 0;
}
.door_img {
    vertical-align: top;
    cursor: pointer;
    max-width: 302px;
}
.details_img {
    vertical-align: top;
    margin-top: 10px;
    cursor: pointer;
    max-width: 420px;
}
.slidesGallery {
    background-color: rgba(0, 0, 0, .8);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    z-index: 21; 
    animation-name: fade-in;
    animation-duration: 0.4s;
    -webkit-animation-name: fade-in;
    -webkit-animation-duration: 0.4s;

}
.slidesGallery img{
    max-width: 90%;
    max-height: 90%;
    margin: auto;
    margin-top: 15px;
    border: solid 14px #fff;
    border-radius: 3px; 
}
.mySlides {
    display: none;  
} 

JAVA

 $(function(){

        $('.door_img_content img').on('click', function() {

            var imageToShow = $(this).attr('rel');
            var images = '#'+imageToShow;
            var div = $(this).attr('rel');
            var sid1 = [
                '<img  src="images/Siding_01b_21.jpg">',
                 '<img  src="images/Siding_01b_22.jpg">',
                 '<img  src="images/Siding_01b_23.jpg">',
                 '<img  src="images/Siding_01b_24.jpg">'
                ]
            var sid2 = [
                 '<img  src="images/Siding_03b_4.jpg">',
                 '<img  src="images/Siding_03b_5.jpg">',
                 '<img  src="images/Siding_03b_6.jpg">',
                 '<img  src="images/Siding_03b_7.jpg">'
               ]
            var sid3 = [
                '<img  src="images/Siding_05b_38.jpg">',
                '<img  src="images/Siding_05b_39.jpg">',
                '<img  src="images/Siding_05b_40.jpg">',
                '<img  src="images/Siding_05b_41.jpg">' 
               ]
         if ($(images).children().hasClass("done")) {
                return;
            }
            else if (div === "siding_1") {
                $('#siding_1').append(sid1);
                $(images).children().addClass('mySlides');
                }   
            else if (div === "siding_2") {
                $('#siding_2').append(sid2);
                $(images).children().addClass('mySlides');
                }  
            else if (div === "siding_3") {
                $('#siding_3').append(sid3);
                $(images).children().addClass('mySlides');
                }
     });

     $('.cap_img_content img, .door_images img, .window_options img').on('click', function() {
      var imageToShow = $(this).attr('rel');
      var images = '#'+imageToShow;
      $(images).removeClass('hide');
      $('#door_overlay').removeClass('hide');
      $('body').removeClass('hide-overlay');
      $(images).children().addClass('mySlides');
      $(images).children().removeClass('current');
      $(images).children(':first-child').css({'display': 'block'})
      $('.overlay_img img, .close_btn, .slidesGallery img, .mySlides').bind('click', "img", function() {
          $(images).addClass('hide');
          $('#door_overlay').addClass('hide');
          $('body').addClass('hide-overlay');
          $(images).children().removeClass('mySlides'); 
          $(images).children().css({'display': 'none'})
      });
    });

    var slideIndex = 1;

    function plusSlides(n) {
        showSlides(slideIndex += n);
    }

    function showSlides(n) {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      if (n > slides.length) {slideIndex = 1}
      if (n < 1) {slideIndex = slides.length}
      for (i = 0; i < slides.length; i++) {
        slides[i].style.display = "none";   
      }
        slides[slideIndex-1].style.display = "block";
      }

Я прошу прощения за то, как это должно быть, но я очень новичок в этом, я надеялся, что кто-то может мне помочь убери это. Заранее спасибо.