Question

我在使用post传递值时将我的DOM ajax升级为jquery ajax，现在问题是加载图像，我试图在这里跟踪一些示例但是没有成功。这是我的代码：

function passLetter(str)
    {       
        $('#loadingImage').attr('style','display:');
        // $('#retail_group').html('<img src="/admin/images/ajax-loader.gif" style="text-align:center;">');
                    //$('#loadingImage').show();                                
        $.ajax({
        url: "getRetailGroup.php",
        type: "GET",
        async: false,
        data:  {"letter": str},
        success: function(data){
                $("#retail_group").html(data);
                //$('#loadingImage').hide();
            }
        });
        getletter = str;
    }

表示div：

<div id="retail_group">
<div id="loadingImage" style = "display:none">
<img src="/admin/images/ajax-loader.gif" style="text-align:center;" alt = "Loader" title = "Loader">
</div>
</div>

Answer 1

试试这个：

 $('#loadingImage').show();

或

$('#loadingImage').css('display','block');

我认为您的#loadingImage div已经有了CSS display: none。

Answer 2

而不是：

$('#loadingImage').attr('style','display:');

尝试：

$('#loadingImage').show();

Answer 3

只需更改为 $('#loadingImage').css('display','block'); 甚至更简单： $('#loadingImage').show();

Answer 4

首先，你应该使用jquery的show()和hide()函数。

$('#loadingImage').show();

其次确保您实际上可以根据浏览器中的图像路径获取图像

http://site.com/admin/images/ajax-loader.gif

如果您使用jquery的show / hide，则需要删除

style = "display:none">

将$('#loadingImage').hide();放入文档就绪块

哦，如果你想用一个jquery将css设置为一个元素，它应该是这样的

$('#loadingImage').css("display","block");

修改

您真正的问题是，您使用ajax结果替换 retail_group的html。当您在下次调用该函数时执行该操作时，不再显示loadingImage div

$("#retail_group").html(data);

您需要像这样更改您的功能：

function passLetter(str) { $('#retail_group').html('<img src="/admin/images/ajax-loader.gif"/>'); $.ajax({ url: "getRetailGroup.php", type: "GET", async: false, data: {"letter": str}, success: function(data){ $("#retail_group").html(data); } }); getletter = str; }

现在每次调用该函数时，retail_group的内部都是图像，直到ajax完成成功

使用jquery ajax显示加载不起作用

4 个答案: