1

I am trying to add a page loading spinner when i click on a dsp(dynamic server pages) page link. I have tried onload and div functionalities as specified in other threads, but the spinner is coming just before the body of the page loads and is not fading out.

To be more clear, when i click on the link, there is a blank page till the page loads, and just before the body is being loaded on page, the spinner starts and remains on the page.

Could someone please help me where, when i click on the link, the spinner should be there until the service output(body) is displayed on the page.

Regards Harish

Harish Shankar
  • 113
  • 1
  • 1
  • 4

1 Answers1

1

Create the loading spinner with just HTML and CSS. Load your javascript at the bottom of the page and in it select the spinner by id and hide it. This will ensure the spinner is shown as early as possible in the loading process and hiden/faded out after the page and javascript has been loaded.

If you are using jquery-- 

$("#spinner").fadeOut( "slow");

From your question it sounds like you are using javascript to show the spinner as well which is why it is being displayed just before the page finishes loading and not while it is loading.

EDIT: Here is a codepen with a working example.-- http://codepen.io/anon/pen/XKoqZq I have hidden the rest of the page in the css with the display:none property . This is optional but this makes the whole page show at once when the loading finishes.

charsi
  • 2,917
  • 22
  • 40
  • Thank you..Let me try...and yes, we are using Java script to show the spinner. Probably that might be the issue. Could you please suggest other possible way. – Harish Shankar Aug 11 '16 at 12:42
  • See the working example in the EDIT to my original answer. The spinner needs to be created in the HTML since that is what will be loaded first. – charsi Aug 11 '16 at 13:10
  • Thank you. I tried the one that is in codepen but i still face the same issue. Along with the output, the image is being loaded but not during the page load. – Harish Shankar Aug 11 '16 at 13:30
  • take another look. Had to modify it a bit but should be working now. – charsi Aug 11 '16 at 13:46
  • sorry, no luck. still the same issue..:( – Harish Shankar Aug 11 '16 at 14:03
  • If you are seeing the loading gif and the html text load at the same time when you open the codepen link then it is a browser issue. – charsi Aug 11 '16 at 14:14