Question

我希望在尚未加载展示广告时淡入缩略图。否则我不希望淡入，因为图像已经全部加载并且淡入看起来很奇怪。

如何检查当前缩略图图像是否作为展示文件中的背景图像加载？

我的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>

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+')');
    });
}

...

谢谢！师德

Answer 1

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

访问元素的background-image属性

$('element').css('background-image');

因此，您始终可以将其输出与要检查的图像URL进行比较。第二种选择：使用像

这样的东西

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

这将在实际加载图像资源时触发。希望有所帮助！

如何检查缩略图背景图像是否等于jQuery中的展示图像？

1 个答案: