jquery - 加载图像时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

您可以使用 class 而不是 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 次），您应该尝试使用 a class="image"，然后您可以这样做。

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