I have a DIV for spinner:
<div id="spinner" style="display:none;z-index:100;position:absolute;top:50%;left:50%;margin-top:-50px; margin-left:-50px;">
<img src="..\spinner.gif" alt="Loading" />
</div>
The code document.getElementById("spinner").style.display = "block" changes the style of the spinner to block but the spinner div not showing:
document.getElementById("spinner").style.display = "block";
getAllStudents(); //this function gets data from MySQL tables and populate a table on the page
document.getElementById("spinner").style.display = "none";
CodePudding user response:
Instead of adding display: none;
after the function call,
try adding the code just before you start populating the table on page.
document.getElementById("spinner").style.display = "none";
CodePudding user response:
Two Ideas:
- If the image
src
is incorrect, I've sometimes found it doesn't display anything, even with analt = "Loading"
tag. You might want to test the link it's displaying the image from to verify it works. (Don't just test thesrc
link). - Assuming the image
src
is correct, you could remove the image from<div id="spinner"/>
and add it separately as<img id="spinner" src="..\spinner.gif" alt="Loading" />
and then you could have your<div
show what you want.
EDIT: (3 ideas now)
- Change your
src
attribute so all of the\
characters are replaced with/
. I tried an image in my own script withsrc = "..\spinner.png"
and it wouldn't even run, but doingsrc = "../spinner.png"
did. Hopefully this solves your problem.