Loading image on Page Load

Sometimes, there faces page load lagging time after submission or reloading of the page. In this situation, it is better to use a page loading image, so that the user can understand what does exactly happening and also it increases the UX.

HTML
<div id="loading">
	  <img id="loading-image" src="https://i.gifer.com/origin/d3/d3f472b06590a25cb4372ff289d81711_w200.gif" alt="Loading..." />
</div>

Give this HTML code at the top of the coding , below the body tag of the page.
You can use any GIF or/ image for this implementation.

CSS
/*Loading image style*/
    #loading {
	  position: fixed;
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  width: 100%;
	  height: 100%;
	  top: 0;
	  left: 0;
	  opacity: 0.7;
	  background-color: #fff;
	  z-index: 99;
	}

	#loading-image {
	  z-index: 100;
	}
/*Loading image style ends here*/

JAVASCRIPT
<script>
  $(window).on('load', function () {
    $('#loading').hide();
  }) 
</script>