How to make the preloader load immediately when the page loads?

W

westdp2015-10-26 11:17:32

css

westdp, 2015-10-26 11:17:32

I use a preloader that I found on the Internet, I like it very much and it suits me, but how can I make it load immediately after the page is loaded, i.e. the orange field was already visible from the first second, and not half a second or a second after the page was loaded?

Working example
And this is in the footer:

<div id="hellopreloader">
    <div id="hellopreloader_preload"></div>
</div>

<script type="text/javascript">
    var hellopreloader = document.getElementById("hellopreloader_preload");

    function fadeOutnojquery(el) {
        el.style.opacity = 1;
        var interhellopreloader = setInterval(function () {
            el.style.opacity = el.style.opacity - 0.05;
            if (el.style.opacity <= 0.05) {
                clearInterval(interhellopreloader);
                hellopreloader.style.display = "none";
            }
        }, 16);
    }
    window.onload = function () {
        setTimeout(function () {
            fadeOutnojquery(hellopreloader);
        }, 0);
    };
</script>

Reply

Answer the question

In order to leave comments, you need to log in

2 answer(s)

R

Radiks Alijevs, 2015-10-26
@westdp

Put preloader in header (not in <head>)

<div id="hellopreloader">
    <div id="hellopreloader_preload"></div>
</div>

S

Spaceoddity, 2013-03-22
@Spaceoddity

PF Din Text Compressed Pro Medium is very similar