Question

我有以下脚本

<script>
$('#event li').click(function() {
    var text = $(this).text();
    $.post("A.php", { text: text }, function(return_data, txtStatus, jqXHR) {
        $('#result').html(return_data);
    });
    $.post("F.php", { text: text }, function(return_data, txtStatus, jqXHR) {
        $('#subresult').html(return_data);
        initialize();
    });
    event.preventDefault() ;
});
</script>

现在脚本A.php和B.php需要一些时间来加载结果，我想在那段时间内显示加载gif。我采取的方法是

<img src="ajax-loader.gif" id="loadingImage" style="display: none;" />
<script>
$('#event li').click(function() {
$("#loadingImage").show();  
var text = $(this).text();
.
.
.

然而，这并没有导致显示器的任何变化。我仍然无法看到装载机。欢迎任何其他建议。

Answer 1

第一： 1.确保实际图像存在！ 2.代码似乎是正确的，所以请点击#event li元素并转到您的站点检查员以查看是否出现任何错误？

Answer 2

您的li可能尚未创建，而您的click事件不具有约束力。因此，请使用$(document).ready(function() { ...// your code });

我会把你的代码写成这样的东西（未经测试）：

$(document).ready(function() {
    $('#event li').click(function() {
        var text = $(this).text();
        $('#loadingImage').show();
        var loaded = 0;
        $.post("A.php", { text: text }, function(return_data, txtStatus, jqXHR) {
            $('#result').html(return_data);
            loaded++;
            if(loaded == 2) $('#loadingImage').hide();
        });
        $.post("F.php", { text: text }, function(return_data, txtStatus, jqXHR) {
            $('#subresult').html(return_data);
            loaded++;
            if(loaded == 2) $('#loadingImage').hide();
            initialize();
        });
        event.preventDefault() ;
    }
});

Jquery后加载gif

2 个答案: