Window load (and fade out) without JQuery

Question

I am currently working on a smaller site, where JQuery is not an option. What I want is to wait until the whole page (incl. images) has loaded (show a CSS loader while the page is loading) and then fade out the CSS loader.

I have the code that works in JQuery:

(function($) {
    $(window).load(function() {
        $('.loader').fadeOut(1000);
    });
});

How can I achieve that without JQuery, the CSS loader is already implemented and working, no need to do anything there (I've never worked without JQuery for any of my projects unfortunately)?

you might find interesting answers here: http://stackoverflow.com/questions/5104053/fade-effect-using-javascript-no-jquery or here: http://codereview.stackexchange.com/questions/7315/fade-in-and-fade-out-in-pure-javascript — benomatis, May 02 '14 at 07:43
...and i found a jsfiddle implementation too: http://jsfiddle.net/gabrieleromanato/cMp7s/ — benomatis, May 02 '14 at 07:44
answer to your question is located here.. http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css — Hawk, May 02 '14 at 07:57
@Hawk - I don't want to just fade something in and out with opacity, but wait for page load and then set a css element to `display:block` with javascript — Paranoia, May 02 '14 at 08:01

W.D. · Accepted Answer · 2014-05-02T08:32:15.890

Here, take a look at this code. => DEMO

I've tested it and it's working. This code also works in legacy browsers (such as IE8 etc).

First, we attach an event listener to our element (window).
Then we define the function (function fadeOut) which will animate the opacity property.
You have to pass options/parameters to our fadeOut function.

Under the first (element) parameter you have to specify the element that is to be animated. The second (startLevel) parameter is the level the animation should start from. The third (endLevel) parameter is the level the animation should stop at. The forth (duration) parameter is the duration of our animation. Finally the fifth (callback) option is a callback, which means when our animation completes, you will get notified and also can pass some additional code.

Javascript

function attach(element,listener,ev,tf){

if(element.attachEvent) {

    element.attachEvent("on"+listener,ev);

}else{

    element.addEventListener(listener,ev,tf);

}

}

function fadeOut(element,startLevel,endLevel,duration,callback){

var fOInt;

    op = startLevel;

fOInt = setInterval(function() {

    if(op<=endLevel){

    element.style.opacity = endLevel;
    element.style.filter = "alpha(opacity = " + endLevel + ")";

    clearInterval(fOInt);

        if(typeof callback == 'function') callback(true);

    }else{

    op -= 0.1;

    element.style.opacity = op;
    element.style.filter = "alpha(opacity = " + op*100 + ")";

    }

    },duration);

}

attach(window,'load',function(){

    fadeOut(document.getElementById('loader'),1,0,50,function(cb){

    alert('The loader has faded out!')

    });

},false);

HTML

<div class='loader' id='loader'></div>

CSS

.loader{
    width:200px;
    height:200px;
    border:5px solid red;
    background-color:brown;
    opacity:1;
    filter:alpha(opacity=100);    
}

Great, that worked. I just removed the alert obviously, but otherwise, perfect! :) Thank you so much — Paranoia, May 02 '14 at 10:50

score 0 · Answer 2 · answered May 02 '14 at 07:47

0

this should work

window.onload=function(){

 var ele = document.getElementsByClassName("loader")[0];
  ele.style.transition="opacity 1s";
  setTimeout(function(){ele.style.opacity=0;},0);
}

answered May 02 '14 at 07:47

ashishmaurya

1,196
10
18

Rohit Batham · Answer 3 · 2014-05-02T08:04:35.060

HTML COde

<span id="loader" style="background-color:#069;padding:30px;text-align:center;">Loading...</span>

JS Code

window.onload = function () {
fade('loader');
}
var TimeToFade = 2000;

function fade(eid) {
var element = document.getElementById(eid);
if (element == null) return;
if (element.FadeState == null) {
    if (element.style.opacity == null || element.style.opacity == '' || element.style.opacity == '1') {
        element.FadeState = 2;
    } else {
        element.FadeState = -2;
    }
}

if (element.FadeState == 1 || element.FadeState == -1) {
    element.FadeState = element.FadeState == 1 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade - element.FadeTimeLeft;
} else {
    element.FadeState = element.FadeState == 2 ? -1 : 1;
    element.FadeTimeLeft = TimeToFade;
    setTimeout("animateFade(" + new Date().getTime() + ",'" + eid + "')", 33);
}
}

function animateFade(lastTick, eid) {
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;

var element = document.getElementById(eid);

if (element.FadeTimeLeft <= elapsedTicks) {
    element.style.opacity = element.FadeState == 1 ? '1' : '0';
    element.style.filter = 'alpha(opacity = ' + (element.FadeState == 1 ? '100' : '0') + ')';
    element.FadeState = element.FadeState == 1 ? 2 : -2;
    return;
}

element.FadeTimeLeft -= elapsedTicks;
var newOpVal = element.FadeTimeLeft / TimeToFade;
if (element.FadeState == 1) newOpVal = 1 - newOpVal;

element.style.opacity = newOpVal;
element.style.filter = 'alpha(opacity = ' + (newOpVal * 100) + ')';

setTimeout("animateFade(" + curTick + ",'" + eid + "')", 33);
}

Window load (and fade out) without JQuery

3 Answers3