CSS3 Run Page Transition When Html Rendered

Question

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.

You need to do the onDomReady: http://stackoverflow.com/questions/1206937/javascript-domready — Akxe, Jun 16 '13 at 11:57

score 0 · Accepted Answer · answered Jun 16 '13 at 12:12

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+.

score 0 · Answer 2 · answered Jun 16 '13 at 12:17

0

You could use pure CSS

@keyframes fadein {
   0%   { opacity: 0; }
   100% { opacity: 1; }
}

.element-to-fade-in
{
   opacity:1;
   animation: fadein 1s;
}

Don't forget to add the prefixes

answered Jun 16 '13 at 12:17

koningdavid

2 Answers2