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();

我希望你明白了......快速加载并在完成后删除！

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

1 个答案: