display 'loading wait..' till the popup div is loaded

display 'loading wait..' till the popup div is loaded

dear sir

refer 



when I Click 
Zoom Image


A pop up is displayed

I want Loading wait message to be displayed before pop is displayed
and this message  should remain till full div is loaded

At present the Loading wait is not displayed
 
I am using

      <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

and my JQUERY Code

  1. <script type="text/javascript">
  2. jQuery(function($){ // local $ is jQuery! 
  3.  $("#closemyDiv").click(function(){ 
  4.  
  5.   $('#myDiv').slideUp(1000) ;
  6.     $('#myDiv1').empty();
  7. $('#multizoom1').empty();
  8. $('#image1').empty();
  9.  });
  10.  $(".album").click(function(){ 
  11.  var id=this.id;
  12.  var id1=id.split('album');
  13.  $('#myDiv').show(1000);
  14.  // alert(id1[1]);
  15.  var dname='load'+id1[1];
  16.  $('#'+dname).show().delay(1000);
  17. //alert(dname);
  18.  
  19.  var url= "projectimagezoomfillmain.php"
  20.   data = {
  21.  id:  id1[1]
  22.   };
  23.  $('#myDiv1').load(url,data,projectimagezoomover(id1[1]) )  ;
  24.  });

  26. function projectimagezoomover(id)
  27. {
  28.  var dname='load'+id ;

  30.  $('#'+dname).hide().delay(1000);

  32. }
  33. $("#myDiv").on( "click", "#closemyDiv", function() {
  34.   $('#myDiv').hide(1000);
  35.  $("#myDiv1").empty();
  36. });



  40.  jQuery.fn.center = function ()
  41. {
  42.     this.css("position","fixed");
  43.     this.css("top", ($(window).height() / 2) - (this.outerHeight() / 2));
  44.     this.css("left", ($(window).width() / 2) - (this.outerWidth() / 2));
  45.     return this;
  46. }

  48. $('#myDiv').center();
  49. $(window).resize(function(){
  50.    $('#myDiv').center();
  51. }); 
  52. });  

  54.         
  55.        </script> 
php code that defines zoom image 

  1. <table width="220">
  2.                       <tr>
  3.                       <td  >
  4.                       <a href="<?php echo  $albumimagesrows['actualimage'];?>" rel="<?php echo "lightbox".$albumimagesrows['id'];?>"> 
  5.                        <img src="<?php echo  $albumimagesrows['smallimage'];?>" style="border:#a6cc37 1px solid; width:180px; height:123px;"  /> 
  6.                        </a>                     
  7.                        </td>
  8.                        
  9.                     </tr>
  10.    <tr>
  11.     <td align="left" valign="top" style="padding-left:10px;"><span class="textregularblack"><?php echo $albumimagesrows['name'];?></span></td>
  12.         </tr>
  13.    <tr>
  14.      <td align="left" valign="top" class="textregular" style="padding-left:10px; padding-top:7px; padding-bottom:10px; "><?php echo $alumimagesrows['detail'];?></td>
  15.        </tr> 
  16.                      <tr>
  17.      <td align="left" valign="top" class="album" style="padding-left:10px; padding-top:7px; padding-bottom:10px; cursor:pointer " id="<?php echo "album".$albumimagesrows['id'];?>"  >
  18.                            Zoom  Image   <div id='<?php echo 'load'.$albumimagesrows['id'];?>' style="margin-left:125px; margin-top:-20px; display:none">Loading Wait...<img src="loading-anim.gif" width="16" height="16" /></div>
  19.                            <label for="imageid"></label>
  20.                            <input name="imageid" type="hidden" id="<?php echo "imageid".$albumimagesrows['id'];?>" value="<?php echo $albumimagesrows['id'];?>" /></td>
  21.        </tr> 
  22.                     </table>