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

});

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

1 个答案: