1

再読み込みするページに少し時間がかかる場合に、読み込み中の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>

上記のコードは正常に機能します。ロードするページは単純なので。しかし、複雑なページになると、ロードに少し時間がかかります！読み込み時間の読み込み画像を表示する方法を教えてもらえますか？

4

1 に答える 1

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

});
于 2012-08-29T17:26:23.107 に答える