jQuery:针对不同事件使用不同的 ajaxStart 和 ajaxStop

Question

好的，我创建了一个小页面，其中不同的元素触发不同的 AJAX 调用。

如果我只有一张加载图像，我会很好地使用 ajaxStart 和 ajaxStop。但我希望在不同的 AJAX 调用上显示不同的加载图像。

当然可行的是:

$("img#loader").show();

$.ajax({
    complete:function()
    {
        $("img#loader").hide();
    }
});

但是有没有更优雅的方法来做到这一点？

Answer 1

您可以尝试动态生成ajax图像并在成功时删除函数。下面是一个示例:

var loader = "<div id='loader'></div>";

您可以在样式表中为 id 加载器定义特定样式 或者您可以使用 jquery 立即提供它。您甚至可以根据您的需要添加覆盖

var panelOverlay= $("<div id='panelOverlay'></div>").css({top:top, left:0,position:fixed, width:"100%", height:"100%", background:'#222', opacity:'.7'});

然后在您进行任何 ajax 调用之前显示它:然后加载

    $("#somediv").append(loader);
    $("#loader").show();
    $("#loader").fadeIn(400).html('<img align="absmiddle" src="/path/to/image/ajax-loader1.gif" />...Loading'); 

然后你进行ajax调用

    $.ajax({
        url     :   ""

          ...

`

成功后，您可以删除加载图像

        success :function(html){
            if(<your condition>){           

                                   ...
                                   ...
                $("#loader").fadeOut('slow',function(){$("#loader").remove();

我希望你明白了......动态加载并在完成后删除!