Javascript 在延迟期间加载图像

当你点击按钮时，我得到了工作的延迟，但我无法在延迟期间显示加载的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;
    });
}

---

我认为您的加载图像定位错误，请尝试：

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

---

加载图像的Id为ajaxLoader replace，以适合您的HTML。

您可以尝试以下方法，而不是您现有的方法： 删除此部分：

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

并将设置超时更改为：

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，这样我们就可以看到，如果一切都是为了

编辑：

---

请为ajax-loader.gif图像发布您的HTML-我相信您没有正确地定位此图像。“我在那里看到另一个错误，$”.tabActive.removeClass.tabActive”；应为$'.tabActive'。删除类'tabActive'；好吧，我把它改成下面的代码，但它仍然没有显示gif$正在加载.ajaxstart函数{$this.show；}.bind'ajaxStop'，函数{$this.hide；}；'“嗯，你试过我贴的东西了吗？它起作用了吗？如果没有显示，您还可以检查gif文件的路径是否正确。它不工作！我已经通过代码多次，我不能找出它！！好的，我现在知道了。谢谢你给我指明了正确的方向

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