javascript - jqueryスライドショーは半分の画像をロードするか、低速のインターネット接続ではまったくロードされません

Question

ここでいくつかの記事を読みましたが、関連性が見つからなかったか、javascript/jquery 言語がないために理解できませんでした。これが私の問題の説明であり、ここで助けが必要です。

私のホームページは、良好なインターネット接続で問題なく開きます。39 個の画像をロードします。合計サイズは 3.79 MB で、そのうち 25 個の画像はわずか 384 kb で、残りの 14 個の画像は 3.41 MB で、サイズは 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---->