要在頁面加載過程中顯示「loading」圖像 - 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/