Preloader for a Wordpress Site

Question

If i want to add a pre-loader to a Wordpress site that is going to have a high image content, is it best to put the code in the head of the site?

I have done a child theme on my localhost site, but can't seem to see where is the best place to put the hmtl / javascript. I'm not too fussed about the CSS because the link to this is in the of the site anyway so i can place the CSS in the style.css file of my child theme.

If I put the JS in my child theme's JS file, it's not going to work properly though, because the site will have to be parsed for this to kick in?

Any help will be wonderful

Thanks

Emily,

Answer 1

You will want to put the code in the child theme, otherwise an update to the parent theme will erase it.

You want the loader to be a part of the page as the document is first loaded by the browser, then use javascript to detect when the images are finished loading and remove the loader.

Check out these resources that have more information specifically on the structure of the HTML and javascript

https://css-tricks.com/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

https://stackoverflow.com/questions/11072759/display-a-loading-bar-before-the-entire-page-is-loaded

http://smallenvelop.com/display-loading-icon-page-loads-completely/

Answer 2

Add below CSS in your CSS file.

/** Body Overlay **/
body #load {
    display: block;
    height: 100%;
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9901;
    opacity: 1;
    background-color: #FFFFFF;
    visibility: visible;
    -webkit-transition: all .35s ease-out;
    transition: all .35s ease-out;
}
body #load.loader-removed {
    opacity: 0;
    visibility: hidden;
}
.spinner-loader .load-wrap {
    background-image: url("images/loader.png");
    background-position: center center;
    background-repeat: no-repeat;
    text-align: center;
    width: 100%;
    height: 100%;
}

Add below code just after the opening tag in your website.

<div id="load" class="spinner-loader"><div class="load-wrap"></div></div>
<script type="text/javascript">
    // Javascript function to display loader on page load
    document.addEventListener("DOMContentLoaded", function(event) {
        var $load = document.getElementById("load");
        var removeLoading = setTimeout(function() {
            $load.className += " loader-removed";
        }, 500);
    });
</script>

Hope this helps..!!