javascript - Preloader for a Wordpress Site

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,

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,

• javascript
• performance

Share Improve this question asked Oct 10, 2016 at 23:53 pjk_okpjk_ok 90822 gold badges1515 silver badges3636 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 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/snippets/jquery/display-loading-graphic-until-page-fully-loaded/

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

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

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..!!