画像の読み込み中にローダーを表示するために次のスクリプトを作成しました。私の唯一の質問は、これを複数の画像に埋め込む方法です。
作業スクリプト： 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="/images/http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif"></div>
<img src="/images/http://responsiveslides.com/1.jpg?PREVENT_CACHE=6200" id="image"/>
</div>
回答：
回答№1は1のようなIDの代わりにクラスを使用できます。
HTML：
<div class="content">
<div class="waiter">
<img src="/images/http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif">
</div>
<img src="/images/http://responsiveslides.com/1.jpg?PREVENT_CACHE=6200" class="image" />
</div>
<div class="content">
<div class="waiter">
<img src="/images/http://bradsknutson.com/wp-content/uploads/2013/04/page-loader.gif">
</div>
<img src="/images/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/
回答№2の場合は0
IDを使用しています #image つまり、スクリプトは1回しか使用できません（同じIDを1ページに1回使用できます）。 class="image"、その後、あなたはそのようにそれを行うことができます。
$(".image").each(function (){
//Your code goes here.
})