javascript - DIVの読み込み時間と一致するようにGIFを読み込んでいます。Jquery

Question

チェックボックスのセットからチェックされた値を取得し、それらの値を渡すDIVをロードするJavaScriptがあります。

現在、DIVをロードする前に「ロード中」の.gifを表示しています。ただし、時間は固定されています。

DIVがコンテンツを完全にロードするまで、このGIFの時間を設定したいので、ユーザーは、他の場合よりも遅い場合に備えて、データがロードされていることを認識します。

何か案が？

ありがとう！

$(function() {
    $("input[type='checkbox']").on('change', function() {
        var colors = [];
        $("input[type='checkbox']:checked").each(function() {
            colors.push(this.value);
        });
        if (colors.length) {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
                $(".indexMain").fadeIn(slow);
            });
            $(".loadingItems").fadeOut(300);
        } else {
            $(".loadingItems").fadeIn(300);
            $(".indexMain").load('indexMain.php', function() {
                $(".loadingItems").fadeOut(300);
            });
        }
    });
});

Answer 1

@Fabricio Matteが提案したように、解決策は、ロードで起動された関数内のロード内に最初のフェードアウトを配置することでした。

            $(".indexMain").load('indexMain.php?color=' + colors.join("+"), function() {
                $(".indexMain").fadeIn(slow);
$(".loadingItems").fadeOut(300);
            });