Question

我想在ajax加载页面时显示图像然后再次隐藏它
然后我尝试这个代码，但图像不会显示所有同时完成（php页面需要大约3秒加载）所以当我删除行$("img").css("display","none");的评论图像永远不会出现
这里是完整的代码

$(document).ready( function(){
    $("#al").click(function(){
        $("img").css("display","inline");
        xmlhttp=new XMLHttpRequest();
        xmlhttp.open("GET","ajax load.php",false);
        xmlhttp.send();
        document.getElementById("showhere").innerHTML=xmlhttp.responseText;
//  $("img").css("display","none");
    });
});

Answer 1

使用CSS

#Loading {
    background:url(images/abc.gif) no-repeat center center;
    height: 64px;
    width: 64px;
    position: fixed;
    z-index: 1000;
    left: 50%;
    top: 50%;
    margin: -25px 0 0 -25px;
}

使用HTML

<div id="Loading" class="dvLoading">
</div>

然后在Ajax调用之前显示div并在Ajax调用之后隐藏div

$('.dvLoading').show(); 
$('.dvLoading').hide();

Answer 2

只需使用jquery ajax $ .get函数（我认为php文件名是ajax_load.php？）：

$(document).ready( function(){
    $("#al").click(function(){
        $("img").css("display","inline");
        $.get("ajax_load.php","",function(data) {
            document.getElementById("showhere").innerHTML = data;
            $("img").css("display","none");
        });
    });
});

Answer 3

由于您已经在使用jQuery，因此使用.load()，并在其回调方法上隐藏图像

$(document).ready(function () {
    $("#al").click(function () {
        $("img").css("display", "inline");
        $("#showhere").load("ajaxload.php", function () {
            $("img").css("display", "none");
        });
    });
});

Answer 4

您已经使用了jQuery，因此您可以利用标准的ajax工具，该工具包含许多选项，其中包括success和error函数：jQuery AJAX

在这两个功能中你应该放

$("img").css("display","none");

虽然display:inline在呼叫上方一行发送ajax请求。

Answer 5

你应该在显示内联后将所有内容包装在setTimeout函数中，延迟时间为2-5毫秒：

$(document).ready( function(){
    $("#al").click(function(){
        $("img").css("display","inline");
        setTimeout(function() {
            xmlhttp=new XMLHttpRequest();
            xmlhttp.open("GET","ajax load.php",false);
            xmlhttp.send();
            document.getElementById("showhere").innerHTML=xmlhttp.responseText;
            $("img").css("display","none");
        }, 2);
    });
});

我不确定主要问题是什么，但我知道使用CSS时，有时更改属性就像一个异步操作。猜测，我认为你有一个竞争条件，其中css变化与请求竞争，并且它们最终同时发生。这个hack基本上告诉请求等待几毫秒，这允许css更改在请求之前附加到异步队列中。

如何在加载ajax时显示图像

5 个答案: