Not a programmer here, so please be gentle... The website is slow to load (shared server) and I'm trying to figure out how to have a pre-loader gif appear on the screen until the page is built to let users know "it's coming". I've seen several examples on the internet, but have yet to figure out how to integrate it onto the website. I can get the gif to load, but it's loading after the page builds, not before then fading. Is it because I'm using static pages? Loading the jquery last? is there a simple copy/paste solution you could share to display a loading gif while waiting for the page to display? Thanks in advance... told you I'm not a programmer

Last updated 5 years ago

Basically to solve this you want the element that contains your loading "screen" to come first in the DOM. Style it with the following:

.loading-container {
     display: block;
     position: fixed;
     background: white;
     top: 0;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10000;
}

And then at the very end of your page, right before the closing </body>, add the following:

<script>
     jQuery(document).ready(function($) {
          $('.loading-container').hide();
     });
</script>