JavaScript Forum

**Galaxian** · 09-13-2008, 09:58 PM

Simple question..

When I perform the jQuery .load function.. is there a way to display some sort of loading div, image, or symbol while it loads that page in the specified div?

**thehuskybear** · 09-13-2008, 10:07 PM

What are you loading and when? What I do is initially hide the item and show a loading div with a class that gives it a loading gif as the background image. Then from within the load function, remove the loading class or hide the div and show the item. I can provide a sample if you need one

**Galaxian** · 09-13-2008, 10:31 PM

Yes please

**thehuskybear** · 11:07 PM

Ok, lets say you are waiting for a image to load...

Your code would look something like this:

HTML Code:

<html>
<head>
    <title>Page Name</title>

    <style>
    <!-- 

         /** Your loading class **/

         .loading{
             background-image: url('images/loading.gif');
          }
    
    //-->
   </style>

   <script>
    <!-- 
    $(document).ready(function()
    {
         // Add loading class to box div
         $('div#box').addClass('loading');
  
         // Create the image
         var myIMG = new Image();

         $(myIMG).load(function()
         {
             // Hide the image
             $(this).hide();
             
             // Remove loading class
             $('div#box').removeClass('loading');

             // Show the image
             $(this).show();
            
             // Add the image to the box div..
             $('div#box').html($(this));

         }).attr('src','images/myIMG.jpg');
    });
   //-->
   </script>

</head>
<body>

<div id="box"></div>

<!-- Other stuff here.....................................  -->

</body>
</html>