Jquery加載圖像，而圖像加載

Question

我做了下面的腳本來顯示加載器，而圖像加載時，我唯一的問題是如何植入多圖像的？

工作腳本：http://jsfiddle.net/4QhjD/

jQuery的部分

$(window).ready(function(){ 
    $("#image").load(function(){ 
     $("#waiter").fadeOut(function(){ 
      $("#image").fadeIn(); 
     }); 
    }); 
}); 

的HTML

 <div id="content"> 
     <div id="waiter"><img src="http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif"></div> 
     <img src="http://responsiveslides.com/1.jpg?PREVENT_CACHE=6200" id="image"/> 
    </div> 

Answer 1

您可以使用類而不是ID的喜歡的。

HTML：

<div class="content"> 
    <div class="waiter"> 
     <img src="http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif"> 
    </div> 
    <img src="http://responsiveslides.com/1.jpg?PREVENT_CACHE=6200" class="image" /> 
</div> 
<div class="content"> 
    <div class="waiter"> 
     <img src="http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif"> 
    </div> 
    <img src="http://responsiveslides.com/2.jpg?PREVENT_CACHE=6200" class="image" /> 
</div> 

代碼：

$(window).ready(function(){ 
    $(".image").load(function(){ 
     $(this).siblings(".waiter").fadeOut(function(){ 
      $(this).siblings(".image").fadeIn(); 
     }); 
    }); 
}); 

演示：http://jsfiddle.net/IrvinDominin/kk7ad/

Answer 2

您正在使用的ID #image這意味着你只能用你的腳本1次（同一ID可以使用每頁1），你應該嘗試使用class="image"，那麼你可以這樣做。

$('.image').each(function(){ //Your code goes here. })