0

サムネイルがまだショーケースに読み込まれていないときに、サムネイルをフェードインしたいと思います。それ以外の場合は、画像が既に読み込まれていてフェードインが奇妙に見えるため、フェードインは必要ありません。

サムネイル画像が現在ショーケースに背景画像として読み込まれているかどうかを確認するにはどうすればよいですか？

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

..。

ありがとうございました！トゥン

4

1 に答える 1

0

サムネイルに実際に設定されている背景画像や、画像リソースの読み込みが完了したかどうかを確認するということですか? 最初のオプション: 要素の background-image プロパティにアクセスできる必要があります。

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

そのため、その出力と、チェックしたい画像の URL が読み込まれたことをいつでも比較できます。2番目のオプション：次のようなものを使用します

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

これは、画像リソースが実際に読み込まれたときにトリガーされます。それが少し役立つことを願っています!

于 2013-03-20T10:33:39.370 に答える