最初のページを開くときに画像が非常に遅い - 画像を読み込む方法

Question

リンク先ページに画像が時間的に変化するページがあります（1つは画像が切り替わります）。それはうまくいきますが、サイトをアップロードするとき、リンク先ページの画像が非常にゆっくりと読み込まれているため、見栄えが悪いことに気付きました。一度読み込まれると（すべてが少なくとも1回出現した）、ページは再び良好になり、トランジションはスムーズで素敵です。

私は画像をプリロードする方法を考えていました。私は多くのものを見つけて、以下を試しました：

  $(window).load(function() { 

       $(".loader").fadeOut("slow"); /*gif that shows when page loads*/ 

       function backgrounds() { 
        for (i = 0; i < preload.arguments.length; i++) { 
         images[i] = new Image() 
         images[i].src = preload.arguments[i] 
        } 
       } 

      }) 

       var backgrounds = new Array(
        'url(Images/image_1.jpg)' 
        , 'url(Images/image_2.jpg)' 
       ); 

     $(document).ready(function(){ 
      /*I have here other functions as well as the function that changes the images one by one*/ 
     }); 

いいえ、いいえ。私はまったく同じ問題を抱えています。初めての写真のロードは非常にゆっくりで、写真の変更機能もロードする前に開始されます（写真を回転させる機能を搭載して変更を行う方法があります）。

私はこのすべてに初心者であるため、誰もが問題に取り組むための最良の方法を教えてください。そして、読み込みが最初に行われることを確認してください。

感謝

Answer 1

CSS3の方が良い解決策があるので、画像をプリロードするためにjavascriptを使用すべきではないと思います。最近のブラウザと互換性があります。例えば

https://perishablepress.com/preload-images-css3/

：ここ

.preload-images { 
    background: url(image-01.png) no-repeat -9999px -9999px; 
    background: url(image-01.png) no-repeat -9999px -9999px, 
     url(image-02.png) no-repeat -9999px -9999px, 
     url(image-03.png) no-repeat -9999px -9999px, 
     url(image-04.png) no-repeat -9999px -9999px, 
     url(image-05.png) no-repeat -9999px -9999px; 
} 

Answer 2

あなたは、それが画像を探すための時間のブラウザによって発見され、必要なファイルと名前空間に新しい画像オブジェクトを作成することができます。このように：

(new Image()).src = "yourImagePath"; 

これでイメージはページに配置されませんが、将来の使用のためにロードされます。

これが役立ちますように！

Answer 3

は、画像をプリロードするCSSの方法です。

は、このリンクから受け入れ答えを参照してください：あなたは、ロードGIFおよびキャッシュからそれをロードする画像の実際の参照を示しながら How to Preload Images without Javascript?

これは基本的に、バックグラウンドですべての画像をロードします。