多个图像加载器一页

Question

我有一个页面有多个图像，我想使用一个加载程序，使其看起来更好，而所有的图像加载。

问题：只有第一个加载图像被隐藏，以便为实际图像和其他方式没有隐藏

HTML：

<img src="/images/loaders/loader.gif" id="imgLoader"> 
<img src="/path/to/image1.jpg" class="sideImage"> 
<img src="/images/loaders/loader.gif" id="imgLoader"> 
<img src="/path/to/image2.jpg" class="sideImage"> 
<img src="/images/loaders/loader.gif" id="imgLoader"> 
<img src="/path/to/image3.jpg" class="sideImage"> 
<img src="/images/loaders/loader.gif" id="imgLoader"> 
<img src="/path/to/image4.jpg" class="sideImage"> 

JQuery的：

$(document).ready(function(){ 
    $('#imgLoader').show(); 
    var totalImages = $(".sideImage").length; 
    var iLoaded = 0; 
    $(".sideImage").each(function(){ 
     $(this).bind("load", function(){ 
      iLoaded++; 
      if(iLoaded == totalImages){ 
       $('#imgLoader').hide(); 
      } 
      $(this).attr('src', $(this).attr("src")); 
     }); 
    }); 
}); 

Answer 1

使用类别不是ID - 将imgLoader ID替换为类和目标。在同一页面上有多个相同的ID是无效的标记，这就是为什么你的jQuery只影响第一个图像的原因（因为它不希望在页面上找到具有该ID的多个元素）。 ID是唯一的 - 没有例外。在任何其他情况下都应该使用类。