CSS3 Run Page Transition When Html Rendered

У меня есть простой CSS3 fade в переходе страницы, который хорошо работает (ТОЛЬКО заботится о IE10 +). Вот как это выглядит:CSS3 Run Page Transition When Html Rendered

ГОЛОВА

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

.loaded 
{ 
    opacity:1; 
}

ТЕЛА

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

Единственная проблема сейчас в том, что если страница имеет много изображений, событие OnLoad является срабатывает только тогда, когда все они загружаются.

Что я могу сделать, используя чистый javascript или CSS, чтобы делать затухание, даже когда изображения загружаются?

ПРИМЕЧАНИЕ. Нельзя использовать внешние файлы или фреймы js.

источник

2013-06-16 c0D3l0g1c

Вы должны сделать onDomReady: http://stackoverflow.com/questions/1206937/javascript-domready – Akxe

Как вы думаете обо мне только IE10 + (и других основных браузерах), вы можете использовать событие HTML5 DOMContentLoaded.

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

Это поддерживается в Chrome 0.2+, FF 1.7+, IE 9+, Opera 9+ и Safari 3.1+.

источник

2013-06-16 12:12:38 Mark

Отлично! Работает как шарм. Благодаря :) – c0D3l0g1c

Вы можете использовать чистый CSS

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

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

Не забудьте добавить префиксы

источник

2013-06-16 12:17:04 koningdavid

CSS3 Run Page Transition When Html Rendered

ответ

Смежные вопросы