3

次のdiv要素があり、その中に画像をロードします。div#main-sliderすべての画像がその中に読み込まれたときだけを表示したい:

次のjQueryを試しました：

$(window).load(function() {  
    $('#main-slider').animate({'opacity':1}, 300);
});

ただしdiv、すべての画像が読み込まれていない場合でも表示されます。

CSS

#main-slider,
#main-slider #bo,
#main-slider #bg,
#main-slider #hugo{
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity:0;
    -khtml-opacity: 0;
    opacity: 0;
}

HTML

<div id="main-slider" class="flexslider">
    <div id="boss" class="tab-container">
        <ul class="slides boss-slides clearfix">
            <li id="1">
                <img src="mobilelp/img/boss_mobile_1.png" />
            </li>
            <li id="2">
                <img src="mobilelp/img/boss_mobile_2.png" />
            </li>
            <li id="3">
                <img src="mobilelp/img/boss_mobile_3.png" />
            </li>
        </ul>
    </div>
    <div id="bo" class="tab-container">
        <ul class="slides bo-slides clearfix">
            <li id="1">
                <img src="mobilelp/img/bo_mobile_1.png" />
            </li>
            <li id="2">
                <img src="mobilelp/img/bo_mobile_2.png" />
            </li>
            <li id="3">
                <img src="mobilelp/img/bo_mobile_3.png" />
            </li>
        </ul>
    </div>
    <div id="bg" class="tab-container">
        <ul class="slides bg-slides clearfix">
            <li id="1">
                <img src="mobilelp/img/bg_mobile_1.png" />
            </li>
            <li id="2">
                <img src="mobilelp/img/bg_mobile_2.png" />
            </li>
            <li id="3">
                <img src="mobilelp/img/bg_mobile_3.png" />
            </li>
        </ul>
    </div>
    <div id="hugo" class="tab-container">
        <ul class="slides hugo-slides clearfix">
            <li id="1">
                <img src="mobilelp/img/hugo_mobile_1.png" />
            </li>
            <li id="2">
                <img src="mobilelp/img/hugo_mobile_2.png" />
            </li>
            <li id="3">
                <img src="mobilelp/img/hugo_mobile_3.png" />
            </li>
        </ul>
    </div>
    <ul class="flex-direction-nav">
        <li><a href="#" class="flex-prev">Previous</a>
        </li>
        <li><a href="#" class="flex-next">Next</a>
        </li>
    </ul>
</div>
4

3 に答える 3

2

私もこの要件を持っていました。imagesLoaded pluginを使用して成功を収めました。

アプリケーションで現在使用しているものに基づく疑似コード:

$('#main-slider').imagesLoaded({
    progress: function (isBroken, $allImages, $loadedImages, $brokenImages) {
        console.log('ok: ' + $loadedImages.length + ', bad: ' + $brokenImages.length);
    },
    done: function ($images) {
        $('#main-slider').animate({'opacity':1}, 300);
    }
});
于 2013-08-22T18:53:48.993 に答える
1

それはかなり簡単になります（fiddle）：

$(function () {
    var $img = $(".waitFor img"),
        n = $img.length;
    $img.on("load error", function () {
        !--n && $(".waitFor").fadeIn(300);
    });
});

これにより、すべての画像が読み込まれるかエラーが発生するのを効果的に待ってから、コンテナー全体がフェードインします。

于 2013-08-22T19:18:53.590 に答える
0

これは単純な問題なので、プラグインを使用したくありません。jQuery はすべての画像要素に便利な .load() 関数を提供するため、実際には非常に単純です。

$(function(){
    var loaded = 0;
    var total = 0;
    $(".waitFor img").each(function(i, e){
        total++;
        $(e).load(function(){
            loaded++;

            if(loaded == total)
                console.log("Everything loaded");
        });
    });
});

Jsフィドル

于 2013-08-22T19:05:08.877 に答える