jQuery loading screen into pure JavaScript

Question

I have this loading screen script that I'd like to implement into a project.

However it requires jQuery. And since none of the elements in the page need jQuery, I'd like to save some space and avoid adding it.

Is there any way I can deliver the exact same function with pure JavaScript?

HTML:

<body onload="hide_preloader();">    
<div class="preloader"> <div class="loader"></div> </div>
</body>

jQuery:

jQuery(window).load(function() { rotate = 0; $(".preloader").fadeOut(250); });

Thanks

jQuery source code is searchable, see how it implements fadeOut(). — Barmar
– Barmar, Commented Nov 7, 2013 at 14:53
If you use jQuery in your other pages, then it is false economy to avoid it in one page, since it will be cached after the first request anyway. And if you use a CDN like Google it will likely already be cached. You are making your application more complex by avoiding jQuery in one page, and using time likely better spent elsewhere. — D'Arcy Rittich
– D'Arcy Rittich, Commented Nov 7, 2013 at 14:56
If you load jQuery from the Google CDN, chances are the user's browser already has it cached so it really doesn't cost much!! If not, for a simple solution consider setting the CSS opacity with Javascript (remember to compensate for MSIE if necessary), then CSS3 transitions in your stylesheet to make it animate. — Shai
– Shai, Commented Nov 7, 2013 at 14:58

lonesomeday · Accepted Answer · 2013-11-07 15:20:57Z

5

Yes, this is actually surprisingly easy. You can do the fade with CSS transitions instead.

First, let's define some CSS:

.preloader {
    transition: opacity 0.25s linear; /* when we change the opacity, use these transition settings */
}

.preloader.fade {
    opacity: 0;  /* when we add the class fade, set the opacity to 0 using the above transition */
}

Now we simply have to add the fade class with Javascript:

window.onload = function() {
    var preloader = document.getElementsByClassName('preloader')[0];

    preloader.className += ' fade';

    setTimeout(function(){
        preloader.style.display = 'none';
    }, 300);
};

Browsers that don't understand transition will set opacity to 0 immediately, while as an absolute failsafe (e.g. for browsers that don't understand opacity) we set display to none after a second for everyone.

jsFiddle showing this effect. (Obviously you will style .preloader differently.)

edited Nov 7, 2013 at 15:20

answered Nov 7, 2013 at 15:01

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nikk Over a year ago

Will I be able to access the content below?

lonesomeday Over a year ago

@Boris As you can see if I pause the animation, you can interact with elements that have less than full opacity. Obviously this is also true of opacity: 0 and display: none. Does that answer your question?

lonesomeday Over a year ago

@Boris Sorry, I was wrong. Elements with opacity: 0 prevent access to the content below. You should shorten the timeout to, say, 300, as I have in my answer.

Latheesan · Accepted Answer · 2013-11-07 14:56:51Z

1

Try something like this:

// taken from http://stackoverflow.com/q/13733912/2332336
function fade(element) {
    var op = 1;  // initial opacity
    var timer = setInterval(function () {
        if (op <= 0.1){
            clearInterval(timer);
            element.style.display = 'none';
        }
        element.style.opacity = op;
        element.style.filter = 'alpha(opacity=' + op * 100 + ")";
        op -= op * 0.1;
    }, 50);
}

and this html:

<body onload="fade(document.getElementById('preloader'));">  
    <div id="preloader"> <div class="loader"></div> </div>
</body>

answered Nov 7, 2013 at 14:56

Latheesan

24.1k34 gold badges113 silver badges212 bronze badges

Comments

Borre Mosch · Accepted Answer · 2013-11-07 14:59:46Z

1

This should work:

window.onload = function(){
  var preloader = document.querySelector('.preloader');

  var startTime = new Date().getTime();
  function fadeOut(){
    var passedTime = new Date().getTime() - startTime;
    var opacity = Math.max(250 / (250 - passedTime), 0);
    preloader.style.opacity = opacity;
    if(opacity){
      setTimeout(fadeOut, 0);
    }
  }
  setTimeout(fadeOut, 0);
}

answered Nov 7, 2013 at 14:59

Borre Mosch

4,5942 gold badges22 silver badges29 bronze badges

2 Comments

Reinstate Monica Cellio Over a year ago

Why not just add a class that has a transition on it? Isn't this overkill?

Nikk Over a year ago

You can't exactly access the content below. I have a z-index set to 10.

Collectives™ on Stack Overflow

jQuery loading screen into pure JavaScript

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related