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,
Share Improve this question asked Oct 10, 2016 at 23:53 pjk_okpjk_ok 9082 gold badges15 silver badges36 bronze badges2 Answers
Reset to default 1You 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..!!