title: I want to make a loading feature on page using php and jquery
body: <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script&gt;
              $(document).ready(function(){
                  $('img').show();
              });
          &lt;/script&gt;
          &lt;script&gt;
              $(window).load(function(){
                  $('img').hide();
              });
          &lt;/script&gt;
  &lt;body&gt;
      &lt;img src="loading.gif" id="imgId" /&gt;
      &lt;form method="GET" &gt;
          &lt;input type="submit" name="btn_test" value="Click me"&gt;
          &lt;input type="submit" name="btn_test2" value="Click me no action"&gt;
      &lt;/form&gt;
      &lt;?php
          if(isset($_GET['btn_test']))
          {
              for($i=0;$i&lt;=100000;$i++)
              {
                  echo $i;
                  echo "&lt;br&gt;";
                  echo "T";
                  echo "&lt;br&gt;";
                  echo "H";
                  echo "&lt;br&gt;";
                  echo "A";
                  echo "&lt;br&gt;";
                  echo "N";
                  echo "&lt;br&gt;";
                  echo "K";
                  echo "&lt;br&gt;";
                  echo "S";
                  echo "&lt;br&gt;";
                  echo "&lt;p&gt;";
              }
  
          }
  
          if(isset($_GET['btn_test2']))
          {
              echo "No action....";
          }   
      ?&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>This code is working, but loading image appears on the top. But is there any way to load this image on a dialog and page can not be clickable that time?(so that user can't do anything that time)</p>
  
  <p>Thanks in advance for reading. </p>