javascript - 在延迟期间加载图像

Question

当您单击按钮时，我得到了延迟工作，但我无法在延迟期间显示加载 gif。

谢谢

function () {
    $('.sectionThreeTab:not(.tabActive)').click(function () {
        $('ajax-loader.gif').bind('ajaxStart', function () {
            $(this).show();
        }).bind('ajaxStop', function () {
            $(this).hide();
        });
        $('.tabActive').removeClass('.tabActive');
        $(this).addClass('tabActive');
        var lesson = $(this).attr('lesson');
        var self = $(this);
        setTimeout(function () {
            $.ajax({
                type: "GET",
                url: 'lessons/' + lesson + '.htm',
                datatype: "json",
                success: function (data) {
                    $('#sectionTabContent').append(data);
                }
            })
        }, 3000);
        return false;
    });
}

Answer 1

我相信您错误地定位了加载图像，请尝试：

$('#ajaxLoader').bind('ajaxStart', function () {
    $(this).show();
}).bind('ajaxStop', function () {
    $(this).hide();
});

您的加载图像具有 Id 的位置#ajaxLoader（替换以适合您的 HTML）。

Answer 2

你可以试试这个而不是你所拥有的：删除这部分：

$('ajax-loader.gif').bind('ajaxStart', function () {
            $(this).show();
        }).bind('ajaxStop', function () {
            $(this).hide();
        });

并将 setTimeout 更改为：

setTimeout(function () {
            $("#loading").show();
            $.ajax({
                type: "GET",
                url: 'lessons/' + lesson + '.htm',
                datatype: "json",
                success: function (data) {
                    $('#sectionTabContent').append(data);
                },
                complete: function() {
                    $("#loading").hide();
                }
            })
        }, 3000);

还请发布您的 html，以便我们查看其他所有内容是否正常。

编辑：

<div id="loading" class="grayBackground withBorder10" style="display:none"> 
<img alt="Loading..." src="img/ajax-loader.gif" />
</div>