How to remove preloader once window/ document is ready

Question

I have a css preloader that I want to show while the page loads. This is visible. however I want to remove this after the page has loaded/ once the window / document is ready. This is the part I'm having a hard time with.

I am getting the following in the console:

Uncaught TypeError: Cannot read property 'style' of null. On line 40 of the script.js file i.e.: preloader.style.opacity = 1;

//create a new event
var body = new Event('body');

//check if the body is available
var intID = setInterval(function(){
 if (document.body) {
  document.dispatchEvent(body);
  clearInterval(intID);
 }
},10);

//create HTML fragment and then insert fragment inside the DOM - 
//If there is a lot to insert into to the DOM, it is faster to create seperately. 
//Otherwise, every time we try to insert something, a parse has to pass first to;
//find the body, then go to the div, the image, paragraph etc...

//create HTML fragment
var newFragment = function(html) {
 var fragment = document.createDocumentFragment();
 var temp = document.createElement('div');

 temp.innerHTML = html;

 while(temp.firstChild)
  fragment.appendChild(temp.firstChild);

 return fragment;
};

var preloader = newFragment('<div id="preload"><span class="loading_r">R<span class="period">.</span></span></div>');

//insert preloader when body is ready
document.addEventListener('body', function(){
 document.body.insertBefore(preloader, document.body.childNodes[0]);
});

//function to remove preloader markup
var removePreloader = function () {
 var preloader = document.getElementById("preload");
 preloader.style.opacity = 1;

 var animationID = setInterval(function(){
  preloader.style.opacity -= 0.1;
  if (preloader.style.opacity <= 0.2) {
   preloader.parentNode.removeChild(preloader);
   clearInterval(animationID);
  }
 }, 70);
};

//when page is fully loaded remove preloader
window.addEventListener('load', removePreloader);

@font-face {
    font-family: 'Pier Sans-Regular';
    src: url('fonts/pier-regular-webfont.woff2') format('woff2'),
         url('fonts/pier-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'Adam CG';
    src: url('fonts/adam.cg_pro-webfont.woff2') format('woff2'),
         url('fonts/adam.cg_pro-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}


#preload {
font-family: 'Adam CG', sans-serif;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #333333;
}


.loading_r {
    color: #87CE84;
    -webkit-transform: translate(0, -50%);
    -ms-transform: translate(0, -50%);
    transform: translate(0, -50%);
    position: fixed;
    line-height: 0.8em;
    top: 50%;
    left: 0;
    right: 0;
    font-family: ;
    text-align: center;
    pointer-events: none;
    font-size: 4em;
    font-weight: bold;
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -webkit-animation: loading_r 3s ease-in-out infinite;
    animation: loading_r 3s ease-in-out infinite;
    -webkit-transition: all 0.3s 0.5s ease;
    transition: all 0.3s 0.5s ease
}

.loading_r .period {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
    display: inline-block;
    -webkit-animation: loading_r_period 3s ease-in-out infinite;
    animation: loading_r_period 3s ease-in-out infinite
}

@-webkit-keyframes loading_r {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    60% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    68% {
        -webkit-transform: scale(1) translate(-0.5em, 0);
        transform: scale(1) translate(-0.5em, 0)
    }
    85% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    100% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
}
@keyframes loading_r {
    0% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    60% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    68% {
        -webkit-transform: scale(1) translate(-0.5em, 0);
        transform: scale(1) translate(-0.5em, 0)
    }
    85% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
    100% {
        -webkit-transform: scale(1) translate(0, 0);
        transform: scale(1) translate(0, 0)
    }
}
@-webkit-keyframes loading_r_period {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(0.5em, 0) rotate(-360deg);
        transform: translate(0.5em, 0) rotate(-360deg)
    }
    60% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    70% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    80% {
        -webkit-transform: translate(0.2em, 0) rotate(-360deg);
        transform: translate(0.2em, 0) rotate(-360deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
}
@keyframes loading_r_period {
    0% {
        -webkit-transform: translate(0, 0) rotate(0deg);
        transform: translate(0, 0) rotate(0deg)
    }
    50% {
        -webkit-transform: translate(0.5em, 0) rotate(-360deg);
        transform: translate(0.5em, 0) rotate(-360deg)
    }
    60% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    70% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
    80% {
        -webkit-transform: translate(0.2em, 0) rotate(-360deg);
        transform: translate(0.2em, 0) rotate(-360deg)
    }
    100% {
        -webkit-transform: translate(0, 0) rotate(-360deg);
        transform: translate(0, 0) rotate(-360deg)
    }
}

<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos voluptatem cum, fugit aliquam quidem, tenetur quaerat neque! Beatae numquam, laudantium, possimus nisi esse voluptatum explicabo cumque adipisci earum, facilis veritatis.</p>

</body>

I have attached a JS Fiddle which has all the relevant code. https://jsfiddle.net/kultura/xpa4vz8e/

I would like to find a solution using strictly javascript for this particular example as I'm starting out trying to learn javascript.

So far I have moved down the script further, just before the end of the tag. The console returns a null as well when alerting the id 'preload', so from what I've found I'm unsure as to whether it has something to do with the element not being able to be accessed when the call is made to getElementById

Your help and clarity would be appreciated. Thanks guys!

might help http://stackoverflow.com/questions/2485244/window-onload-seems-to-trigger-before-the-dom-is-loaded-javascript — Vitorino fernandes, Aug 02 '16 at 06:57

score 0 · Answer 1 · answered Aug 02 '16 at 06:59

0

Try this

<body onload="getElementById('preload').style.display = none;">

answered Aug 02 '16 at 06:59

Andrei Fedorov

3,689
2
13
25

Hey Andrey, I changed the opening body tag in the HTML to this but nothing happened. Do I have to to make a change elsewhere? – Enrique Aug 02 '16 at 07:19
No. This code has to remove preloader, when page end of loading. This a work in u fiddle – Andrei Fedorov Aug 02 '16 at 08:04
Can you show me the changes you made because I can't get your code to work for me. I get `Uncaught ReferenceError: getElementById is not defined`. Thanks friend. – Enrique Aug 02 '16 at 08:26
oh very sorry. – Andrei Fedorov Aug 02 '16 at 08:31
I tried your suggestion but now I have two 'Uncaught TypeError: Cannot read property 'style' of null' errors. Any alternatives? Were you able to get it working? – Enrique Aug 03 '16 at 04:43
maybe – Andrei Fedorov Aug 03 '16 at 08:01

Laxminarayan · Answer 2 · 2016-08-02T09:26:19.583

0

JavaScript is asynchronous. So the code window.addEventListener('load', removePreloader); is running already. So the preload is already removed and you want to perform operation on non-existing element. So you are getting this error. Try to execute this code after 10 seconds. You will not get the error.

Execute your code as

setTimeout(function() {
   window.addEventListener('load', removePreloader);
}, 6000);

edited Aug 02 '16 at 09:26

answered Aug 02 '16 at 07:00

Laxminarayan

188
2
16

I understand the logic. Thanks. How would you suggest executing this code? – Enrique Aug 02 '16 at 08:30
Hey thanks for your time. I'm no longer getting the null error in the console but at the same time the CSS preloader is still not being removed when the page has finished loading. – Enrique Aug 02 '16 at 12:17

How to remove preloader once window/ document is ready

2 Answers2