ページの読み込み中に「読み込み中」の画像を表示したい - Javascript

Question

私は電子商取引のウェブサイトの製品を表示するために次のコードを使用しています。製品がロードされている間は、画像は徐々に消えて通常の状態に戻ります。新しい商品がロードされているときに、ローディングイメージ（thisなど）を表示したいとします。これを行うには、以下のコードにどのようなコードを含める必要がありますか？

function displayProducts(){  

     $('#product_show').fadeOut('slow', function() { 
     // Animation complete 
      setProducts(); 
      $('#product_show').fadeIn('slow'); 
     }); 
} 

Answer 1

多分絶対に（私はあなたが#product_show要素があるだかわからないんだけど、それはコンテナのいくつかの並べ替えであると仮定すると、あなたはそれにその画像を追加することができます中央に位置する）。それが完了すると、イメージを削除します。

何かのように：

$('#product_show').append('<img src="..." class="progress"/>').fadeOut('slow', function() { 
     // Animation complete 
      setProducts(); 
      $('#product_show').remove('img.progress').fadeIn('slow'); 
}); 

Answer 2

読み込み中のgif divを常に表示し、読み込みが完了したら非表示にすることをお勧めします。

1. フェードアウトあり、gifの読み込みが表示されます。
2. 新製品の読み込みからのコールバック（ajax呼び出しまたは何をしていますか）
3. コールバックを取得すると、新しい製品がフェードインします。 gifを読み込んでいません。

ニースロードGIFジェネレータ：http://www.ajaxload.info/