2

3つのタブを保持するコンテナがあり、タブをクリックすると、コンテナは新しいクラスを取得します-クラスを取得すると、CSSのbackgroundImageが変更され、タブコンテナのコンテンツが変更されます-私の問題は背景画像はかなり重く、PNGファイルです。透明度が必要なため、JPGなどに変更することはできません...

だから、おそらく .load() 関数などを使用して、タブコンテナのコンテンツを変更する前に、背景画像をプリロードできる方法があるかどうか疑問に思っていましたか? 私がこれまでに持っているスクリプトは次のとおりです。

$(".tabs-content div.tabpage").hide(); // Initially hide all content
$(".tabs li:first").attr("id", "current"); // Activate first tab
$(".tabs-content div:first").fadeIn(); // Show first tab content
$('.tab-container a').click(function(e) { //If only tabs, change to .tabs a
    e.preventDefault();
    var className = $(this).attr("name")
    $(document).find(".tab-container").attr("class", "grid_9 tab-container " + className);
    if ($(this).closest("li").attr("id") == "current") { //detection for current tab
        return
    } else {
        $(".tabs-content div.tabpage").hide(); //Hide all content
        $(".tabs li").attr("id", ""); //Reset id's
        $(this).parent().attr("id", "current"); // Activate this
        $('#' + $(this).attr('name')).fadeIn(); // Show content for current tab
    }
});
4

4 に答える 4

0

JavaScript Image オブジェクトを使用できます。このようなもの：

var img = new Image();
img.src = "http://yourserver/yourimage";

これで画像が読み込まれます。詳細はこちら (ただし、記事の内容は自分で確認していません): http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

于 2013-07-02T12:23:10.610 に答える
0

非表示の画像を読み込んで、画像の読み込みが完了したら変更することができます。この質問の回答を確認してください。既に SO にあるコードの重複を避けたいと思います。

于 2013-10-07T10:44:11.713 に答える