My loading.gif does not display on button click

Question

I'm trying to create a loading screen whenever my button clicks, it executes the Ajax and everything but not the loading screen.

CSS

<style>
#display_loading{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 50%);
}
</style>

jQuery

$("#submit-btn").click(function(){
  //$('#loading').show();
  $("#display_loading").html('<img src="C:\Users\jmdsantos\Loading_icon.gif" height="100px" width="100px">')

And Below is for closing of the loading GIF through Ajax.

$("#display_loading").html('')

Where did I go wrong?

Answer 1

check your image path it not should be E&C both drive

E:C:\\Users\\jmdsantos\\Loading_icon.gif

Use only Loading_icon.gif if you are in jmdsantos folder.

Answer 2

Your image tag is wrong. It should not put in like that.

It better to hide the image by id or any class using css and then display it on click function.

 $("#submit-btn").click(function(){ $("#display_loading").show(); }); 

  #display_loading{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, 50%); display:none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="display_loading"><img src="/path to/jmdsantos/Loading_icon.gif" height="100px" width="100px"></div> <button id="submit-btn">to click</button>