0

私はこのセットアップを持っています：

<div id="container1">
    <!-- content from one section -->
</div>
<div id="container2" style="display:none;">
    <div id="sub-container">
        <img src="image1.png" />
        <img src="image2.png" />
        <!-- 20 or so images sit here -->
    </div>
</div>

container1が最初に表示されます。document.ready では、カルーセルのようなものを構築するために、最初の 4 つの画像を除くすべての画像が隠されています。ユーザーがボタンをクリックすると、container1フェードアウトしてcontainer2フェードインします。

ユーザーがボタンを初めてクリックすると、container2フェードインせずに、すぐに表示されます。2 回目は、通常どおりフェードインします。

関連する画像はかなり大きい (合計サイズが 10 MB まで) ですが、ページがローカルで表示されることを意図している限り、それは問題ではありません。画像が 1 つまたは 2 つある場合に問題が発生しないという事実は、ブラウザーが画像の読み込みとフェードインの両方を同時に行うのに苦労していることを示しています。2 回目に読み込まれると、画像がキャッシュされ、通常どおりフェードインします。

次のような形式のプリロードを試しました。

/* take the div outside the viewport but still render it */
.hide {
    position: absolute;
    top: -9999px;
    left: -9999px;
}

var cacheContainer = "<div class='hide'></div>",
    $images = $("#sub-container img");
// move the images to the container
$(cacheContainer).appendTo("body").append($images);

// hopefully 500ms would be enough for the images to render?
setTimeout(function () {
    images.appendTo("#sub-container");
    doGallery(); // build carousel
},500);

...ただし、これは同じ問題につながります-container2最初のラウンドでフェードする代わりにポップインし、その後は完全に正常に動作します。

何か案は？

リクエストに応じて、コンテナを非表示/表示するために使用するものは次のとおりです。

$(document).ready(function() {
    var $currentTab = $("#container1"),
        $newTab,
        newTabName;

    // a couple of more unrelated setting up functions go here

    doImageCaching(); // the function I've got above

    $("#container2").hide();

    $("#tab-links>a").click(function(e) {
        e.preventDefault();

        // probably a bit cheeky doing it this way but oh well
        newTabName = $(this).attr("id").replace("-btn", "");
        if($currentTab.attr("id") === newTabName) {
            return;
        }
        $newTab = $("#" + newTabName);

        $newTab.stop(true, true).fadeToggle(200);
        $currentTab.stop(true, true).delay(100).fadeToggle(200);
        $currentTab = $newTab;
        $newTab = null;
    });
});

参考#tab-linksまでに：

<div id="tab-links">
    <a id="container1-btn" href="#">show container 1</a>
    <a id="container2-btn" href="#">show container 2</a>
</div>

編集 2それで、何か新しいことに気付きました。2 回目に切り替えるとcontainer2、通常どおりフェードインします。10 秒ほど待ってからcontainer2 もう一度に切り替えようとすると、問題が再発します。

したがって、DOM のロードはこれとは何の関係もないように思えます。私は Chrome の内部メモリを扱っています。そのため、画像が読み込まれ、再び非表示になると「忘れられます」。うわぁ。

ブラウザが画像を「忘れる」のを防ぐ方法について誰か考えがありますか、それとも私が本当に取るべきではない方向ですか?

4

1 に答える 1

0

そのため、超高品質の PNG を超高品質の JPG に変換することになりました。これにより、見た目の品質はほとんど低下せずに、ファイル サイズが約 20 ～ 30% 縮小されました。私の問題も消えました。

この話の教訓は、オンラインにならないページを開発している場合でも、画像を最適化する必要があるということです。

ご協力ありがとうございました。

于 2012-08-17T15:08:40.830 に答える