当要重新加载的页面需要一点时间时，显示加载的gif图像？

Question

有人可以告诉我当要重新加载的页面花费一点时间时如何显示加载的gif图像吗？

我正在使用jquery-ajax加载页面。 我的用于加载页面的jquery-ajax的示例如下所示。

loader.js

$(document).ready(function(){  
 $("#emphome").click(function(){  
 $("#response").load("EMP_Home.jsp");  
 });  
 $("#custhome").click(function(){  
 $("#response").load("Customer_Home.jsp");  
 });  
 $("#manahome").click(function(){  
 $("#response").load("Manager_Home.jsp");   
 });  
}); 

test.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <head>

    <script type="text/javascript" src="js/jquery.js"></script> </head> <body>

        <!--==============================content================================-->
       <div class="container" id="response">
            </div>
        <a href="#Customer Home"  id="custhome" class="nav">Customer Home</a>
        <a href="#Employee Home"  id="emphome" class="nav">Employee Home</a>
        <a href="#Manager Home"  id="manahome" class="nav">Manager Home</a>     <!--==============================footer=================================-->
         <script type="text/javascript" src="js/loader.js" ></script>

<!--  End top Nav-->

</body> </html>

Customer_Home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Welcome to Customer Home!</h1>
    </body> </html>

EMP_Home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Welcome to Customer Home!</h1>
    </body> </html>

Manager_Home.jsp

<%@page contentType="text/html" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"    "http://www.w3.org/TR/html4/loose.dtd">

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
    </head>
    <body>
        <h1>Welcome to Manager Home!</h1>
    </body> </html>

上面的代码工作正常。 因为要加载的页面很简单。 但是当涉及到复杂的页面时，需要花费一些时间来加载！ 谁能告诉我如何显示加载时间的加载图像？

Answer 1

$(document).ready(function () {
    $("your_loafing_gif_image_id").hide();

    $("#emphome").click(function () {
        $("your_loafing_gif_image_id").show();
        $("#response").load("EMP_Home.jsp", function(){
            $("your_loafing_gif_image_id").hide();
        });
    });

    $("#custhome").click(function () {
        $("your_loafing_gif_image_id").show();
        $("#response").load("Customer_Home.jsp", function(){
            $("your_loafing_gif_image_id").hide();
        });
    });

    $("#manahome").click(function () {
        $("your_loafing_gif_image_id").show();
        $("#response").load("Manager_Home.jsp", function(){
            $("your_loafing_gif_image_id").hide();
        });
    });

});