0

I want to fade in a thumbnail when it's not yet loaded in the showcase. Otherwise I don't want the fade in, because the image is allready loaded and the fade in looks odd.

How do I check if the thumbnail image currently is loaded as background-image in the showcase?

My HTML-part:

<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-part:

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

...

Thank you! Teun

4

1 回答 1

0

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

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

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

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

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

于 2013-03-20T10:33:39.370 回答