Javascript 如何在jQuery中检查缩略图背景图像是否等于showcase图像？

当缩略图尚未加载到showcase中时，我希望在缩略图中淡入淡出。否则，我不希望淡入，因为图像已经加载完毕，淡入看起来很奇怪

如何检查缩略图图像当前是否加载为showcase中的背景图像

我的HTML部分：

<div class="showcase pink hidden-phone">
<div class="detail">
                <div class="image">
                    <div id="myCarousel" class="carousel slide">
                        <!-- Carousel items -->
                        <div class="carousel-inner">
                            <div class="active item" style="background-image: url('img/520x300.gif');">1</div>
                            <div class="item" style="background-image: url('img/520x300.gif');">2</div>
                            <div class="item" style="background-image: url('img/520x300.gif');">3</div>
                        </div>
                        <!-- Carousel nav -->
                        <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
                        <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
                    </div>                
                </div>
                <div class="text">
                    <span class="head">Locatie</span><br />
                    Hoogstraat te Eindhoven (centrum)<br />
                    <br />
                    <span class="head">Locatie</span><br />
                    Hoogstraat te Eindhoven (centrum)<br />
                    <br />
                    <span class="head">Verkoopprijs</span><br />
                    <span class="price">&euro; 449.000 k.k.</span><br />
                    <br />
                    <a href="#" class="info btn">Meer informatie</a>
                    <br />
                </div>
            </div>
            <div class="choice hidden-phone">
                <div class="row-fluid">
                    <a href="#" class="span2 border-pink" style="background-image: url('img/140x105.gif');" rel="0"></a>
                    <a href="#" class="span2 border-blue" style="background-image: url('img/140x105.gif');" rel="1"></a>
                    <a href="#" class="span2 active border-pink" style="background-image: url('img/140x105.gif');" rel="2"></a>
                    <a href="#" class="span2 border-blue" style="background-image: url('img/140x105.gif');" rel="3"></a>
                    <a href="#" class="span2 border-pink" style="background-image: url('img/140x105.gif');" rel="4"></a>
                    <a href="#" class="span2 border-blue" style="background-image: url('img/140x105.gif');" rel="5"></a>                    
                </div>
            </div>
        </div>

1.
2.
3.
地点

埃因霍温（中心）



地点

埃因霍温（中心）



Verkooprijs

&欧元；449.000 k.k.

Jquery部分：

if($('div.showcase .row-fluid').length)
{
    $('div.showcase .row-fluid').on('click','a',function(i,obj){
        var itemId =   $(this).attr('rel');
        var data   =   showcaseData[itemId];

        var htmlImg =   '';
        $.each(data.imagedirectory, function(i,obj2) {
            firstClass  =   (i == 0) ? ' active':'';
            htmlImg += '<div class="item'+firstClass+'" style="background-image: url(img/'+obj2.imgFile+');"></div>';
        });

        if (...){
            $("div.showcase div.carousel-inner").html(htmlImg);
            console.log(itemId);    
        } else {
            $('div.showcase div.carousel-inner').fadeTo(100, 0.2, function() 
            {
                $(this).html(htmlImg)
            }).fadeTo(300, 1);
            console.log(htmlImg);
        }

        $('span.location').html(data.street+' '+data.housenumber+' te '+data.city);
        $('span.metrage').html(data.metrage);
        $('span.price').html('&euro; '+number_format(data.price,2,',','.'));
        $('div.showcase a.info').attr('href',data.detail_url);
    });
}

if($('div.catalogDetail .row-fluid .thumbImages').length)
{
    $('div.catalogDetail .row-fluid .thumbImages').on('click','a',function(i,obj){
        var newImage =   $(this).attr('rel');
        $('.catalogDetail .mainImage').css('background-image','url('+newImage+')');
    });
}  

if（$（'div.showcase.row fluid'）.length）
{
$（'div.showcase.row fluid'）。on（'click'，'a'，函数（i，obj）{
var itemId=$（this.attr（'rel'）；
var数据=showcaseData[itemId]；
var htmlImg=''；
$.each（data.imagedirectory，函数（i，obj2）{
第一类=（i==0）？“活动”：“”；
htmlImg+=''；
});
如果（…）{
$（“div.showcase div.carousel-inner”）.html（htmlImg）；
console.log（itemId）；
}否则{
$（'div.showcase div.carousel-inner'）.fadeTo（100,0.2，函数（）
{
$（this.html（htmlImg）
}).fadeTo（300,1）；
console.log（htmlImg）；
}
$（'span.location'）.html（data.street+''+data.housenumber+'te'+data.city）；
$（'span.metrage'）.html（data.metrage）；
$（'span.price'）.html（'&euro；'+number_格式（data.price，2'，'，'）；
$（'div.showcase a.info'）.attr（'href'，data.detail_url）；
});
}
if（$（'div.catalogDetail.row fluid.thumbImages'）.length）
{
$（'div.catalogDetail.row fluid.thumbImages'）。打开（'click'，'a'，函数（i，obj）{
var newImage=$（this.attr（'rel'）；
$（'.catalogDetail.mainImage'）.css（'background-image'，'url（'+newImage+'））；
});
}  

谢谢大家!！

---

Teun

您的意思是查看缩略图中实际设置的背景图像，还是图像资源是否已完成加载？ 第一个选项：您应该能够使用

$（'element'）.css（'background-image'）

因此，您可以随时将其输出与要检查的已加载图像URL进行比较。
第二种选择：使用类似

$('img.class').load(function() { do_things_when_loaded(); });

这将在实际加载图像资源时触发。希望对你有所帮助
 嘿，男爵，这可不是我想要的。我想要以下内容：如果在.item.active中加载了缩略图，则添加htmlImg，但不带fadeIn效果（“else”选项）。