Question

我在加载图片时制作了以下脚本来显示加载器，我唯一的问题是如何在多个图像上植入这个？

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

您使用的是身份#image，这意味着您只能使用您的脚本一次（相同的ID可以每页使用1次），您应该尝试使用class="image"，然后就可以喜欢这样。

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

加载图像时Jquery加载图像

2 个答案: