Question

我有一个简单的CSS3淡入淡出页面过渡，效果很好（只关心IE10 + ）。这是它的样子：

HEAD

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

.loaded
{
   opacity:1;
}

BODY

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

现在唯一的问题是，如果页面有很多图像，只有在下载所有图像时才会触发onload事件。

即使在下载图像时，我还能使用纯javascript或CSS进行淡入淡出？

注意：不能使用任何外部js文件或框架。

Answer 1

由于您只关心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 +均支持此功能。

Answer 2

你可以使用纯CSS

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

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

不要忘记添加前缀