JQuery слайд-шоу загружает половину изображений или не загружается вообще при медленном интернет-соединении

Question

Я прочитал несколько статей здесь, но либо не нашел актуальных, либо не понял из-за отсутствия языка javascript/jquery. Вот описание моей проблемы и нужна помощь здесь.

Моя домашняя страница прекрасно открывается при хорошем интернет-соединении. Он загружает 39 изображений, общим размером 3,79 МБ, из которых 25 изображений имеют размер всего 384 КБ, а остальные 14 изображений имеют размер 3,41 МБ с размерами 1200 x 450. Эти 14 изображений фактически принадлежат слайдеру слайд-шоу jquery, который продолжает появляться через несколько секунд. интервал, скорость установлена ​​на 600. Я не хочу менять скорость. Что происходит, когда интернет-соединение медленное, оно загружает менее половины изображения или не загружается вообще, и слайд-шоу переходит к следующему слайду. Снова следующий слайд загружает половину или ничего, и это продолжается. Это не происходит при умеренном или быстром подключении к Интернету.

Я скачал этот шаблон откуда-то, и у меня нет знаний о javascript или jquery. Я хочу, чтобы мои пользователи, которые используют медленное интернет-соединение, получили нужный эффект слайдера. Я только что проверил свой сайт и еще не опубликован, поэтому не могу дать URL.

Есть ли способ загрузить все 14 изображений слайд-шоу перед началом слайд-шоу? Какие изменения мне нужно сделать и где? Пожалуйста, помогите мне. Дайте мне знать, если вам нужна дополнительная информация.

Спасибо.

<script src="js/jquery.min.js"></script>
<script src="js/responsiveslides.min.js"></script>
          <script>
            // You can also use "$(window).load(function() {"
                $(function () {
                  // Slideshow 1
                  $("#slider1").responsiveSlides({
                    maxwidth: 2500,
                    speed: 600
                  });
            });
          </script>

                <!--start-image-slider---->
                    <div class="image-slider">
                        <ul class="rslides" id="slider1">
                          <li><img src="images/slider3.jpg" alt=""></li>
                          <li><img src="images/slider2.png" alt=""></li>
                          <li><img src="images/slider1.png" alt=""></li>
                          <li><img src="images/slider4.png" alt=""></li>
                          <li><img src="images/slider5.png" alt=""></li>
                          <li><img src="images/slider6.png" alt=""></li>
                          <li><img src="images/slider7.png" alt=""></li>
                          <li><img src="images/slider8.png" alt=""></li>
                          <li><img src="images/slider9.png" alt=""></li>
                          <li><img src="images/slider10.png" alt=""></li>
                          <li><img src="images/slider11.png" alt=""></li>
                          <li><img src="images/slider12.png" alt=""></li>
                          <li><img src="images/slider13.png" alt=""></li>
                          <li><img src="images/slider14.png" alt=""></li>
</div>
            <!--End-image-slider---->