CSS3 Run Page Transition When Html Rendered

16 June 2013 - 1 answer

I have a simple CSS3 fade in page transition, which works well (ONLY care about IE10+). Here's what it looks like:

HEAD

body
{
   opacity: 0;
   transition: all 1s ease;
}

.loaded
{
   opacity:1;
}

BODY

<body onload="document.body.classList.add('loaded');">

The only problem now, is that if the page has a lot of images, the onload event is triggered only when all of them are downloaded.

What can I do, using pure javascript or CSS to do the fade in, even while images are downloading?

NOTE: Can't use any external js files or frameworks.

As you only care about IE10+ (and other major browsers I assume), you can use the HTML5 event DOMContentLoaded.

    document.addEventListener('DOMContentLoaded', function () {
         document.body.classList.add('loaded');
    }, false);

This is supported in Chrome 0.2+, FF 1.7+, IE 9+, Opera 9+ and Safari 3.1+.

source: stackoverflow.com