jquery - Setup a loading gif until AJAX is loading items -

I am loading some content from any other page and specific div (# hottel-list) (Rezults2. Php) in your current page (main.fp) on the <(# hotel-list) / code>.

I have the main.php page:

  & lt; Div id = "hotel-list" category = "hotel-list list-style 3 hotels" & gt; Loaded content by jQuery AJAX Load here [] & lt; / Div & gt;  

and the jQuery AJAX Load () code is:

  var datastring = location.search; // Now you can update this var and use $ ("# hotel-list"). Load ("Rezults2.php" + datastring + "# hotel-list> *");  

My question: how can I set a loading image before content is loaded

Is there any ideology?

HTML:

  & lt ; Img src = "loading.gif" class = "loading" />  

Jquery:

  $ ('Loading'). Show () for an example; // I guess * at some event predefined * onclick * or * some more * var datastring = location.search; $ ("# Hotel-List"). Load ("Rezults2.php" + datastring + "# Hotel-list"; * ", function () {Warning (" was loaded "); $ ('Loading'). Hide (); });  

CSS:

  .loading {display: none; }  Explanation:  You have to load the image which will be hidden by default. As you can see in our code the image is shown and a Loading the bar data we are hiding the image that is loading simple!