Usually when you are loading the specific content or if you are calling a page using ajax function, you need to show the loading GIF. Here you need to use a small function to show the loading, just to keep your user engaged to the content without getting distracted by clicking on the other page. This is very important tas to be performed by every coder while developing your web pages. 

Because, we cannot lose a user by deviating from one page to other, which will eventually drops your website bounce rate.

Let's come to the main topic on how to insert the loading GIF to show the user that, your content is still loading if the internet is observring some slowness.

If your simple script is as below,

    <script>
$(document).ready(function(){

    $("#div1").load("example.php");
  });

</script>  

Then you need to use a simple code as below to load your specific page and a gif loader until the main content shows to the user.

Your html script

<div id="img-load">
<img src="loading.gif" />
</div>

Your actual Javascript to show the loader.gif

loader = function(){
    $('#img-load').show();
    $( "#result" ).load( "example.php", function() {
      $('#img-load').hide();
    });
}
loader();

And that's it, you are done with this simple code

Do comment your opinion in the comment section.