在加載一個廣泛的圖像時顯示小加載器圖標

Question

我有這個腳本來加載頁面後加載一些圖像加載完成後我想知道如何在加載圖像時顯示加載器文本或小gif圖標。

$(function() { 
     $(".product-image-holder").each(function() { 
      $(this).attr('src', $(this).attr("alt")); 
     }); 
}); 

Answer 1

你必須自己顯示/隱藏加載器。

對於每個圖像不同的裝載機

$(".product-image-holder").each(function() { 
     $(this).bind("load", function(){ 
      // Hide loader code here for this image 
     }); 
     // Show loader code here for this image 
     $(this).attr('src', $(this).attr("alt")); 
    }); 

1裝載機所有圖像

// Show your loader here 
var totalToLoad = $(".product-image-holder").length; 
var loaded = 0; 
$(".product-image-holder").each(function() { 
     $(this).bind("load", function(){ 
      loaded++; 
      if(loaded == totalToLoad) 
      { 
       // Hide your loader here 
      } 
     }); 
     $(this).attr('src', $(this).attr("alt")); 
    }); 

Answer 2

相當直截了當

注 -（答案將是，如果有效<img class='.product-image-holder' />正在一些父母HTML標籤說<div><img class='.product-image-holder' /></div>）

$(function() { 
     $(".product-image-holder").each(function() { 
      $(this).attr('src', $(this).attr("alt")); 
      $(this).parent().load("http://example.com/any-other-image.jpg"); 
     }); 
});