javascript - 加载 GIF 以匹配 DIV 的加载时间。jQuery

Question

我有一个 javascript，它检索从一组复选框中选中的值并加载一个传递这些值的 DIV。

目前，我在加载 DIV 之前显示“加载”.gif。不过，时间是固定的。

我想设置这个 GIF 的时间，直到 DIV 完全加载其内容，所以用户知道数据正在加载，以防有时比其他人慢。

任何想法？

谢谢！

$(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 所建议的那样，解决方案是将第一个 Fade Out 放在负载内的负载内，该函数与负载一起启动：

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