Home/ Questions/Q 8449847
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T10:49:02+00:00

can anyone tell me how to display a loading gif image when the page

  • 0

can anyone tell me how to display a loading gif image when the page to be reloaded takes a little bit time?

i’m using jquery-ajax for loading pages.
An example of my jquery-ajax for loading pages is shown below.

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>

The above code works fine. since the pages to be loaded is simple. but when it comes to complex pages it takes a bit time to load! can anyone tell me how to display a loading image for the loading time?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    $(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();
        });
    });

});
    • 0