Display loading image in SharePoint using JavaScript

To display loading image in SharePoint site We have to download the image and save it as Loading.gif and save it in SharePoint document library. Select list new item page and to be and edit the page.

Add Content Editor Web part to the page. Enter following script to the page.

<script src="../Library/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>

<style type="text/css">

   #loadImage {display:none;}

</style>

<script type="text/javascript">

function PreSaveItem()
{
  $("# loadImage ").css("display", "block");
    if ("function" == typeof (PreSaveAction)) {
        return PreSaveAction();
    }
    return true;
}
</script>

<div style="padding-top: 25px; padding-left: 30px;">
   <img width="250" height="250" id="loadImage" src="/Site/images/Loading.gif" alt=""/>
</div>

Save and close the page. Here src is the image to be loaded and enter the padding. We can see the image when page loading as shown below.

Function will be called on the List item Save event.