JQuery preloader show and fade out

Question

I have a preloader

 <div id="overlay">
 <div class="preloader">
        <div>R</div>
        <div>E</div>
        <div>D</div>
        <div>A</div>
        <div>O</div>
        <div>L</div>
        <div>E</div> 
        <div>R</div>
        <div>P</div>
    </div>
    </div>

And i have a css for it, which is pretty big file. My problem is that my jQuery is not loading it properly, it loads it just in the top left corner, and I'm new to this so I don't understand jQuery very well.

 <script>
    var overlay = document.getElementById("overlay");

    window.addEventListener('preloader', function () {
        overlay.style.display = 'none';
    });
</script>

Answer 1

Use this:

window.addEventListener('load', function () {
    overlay.style.display = 'none';
});