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>

延迟期间加载图像

2 个答案: