在加载一个广泛的图像时显示小加载器图标

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"); 
     }); 
});