1

ページ遷移の単純なCSS3フェードがありますが、これはうまく機能します ( IE10+ のみを気にします)。外観は次のとおりです。

頭

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

.loaded
{
   opacity:1;
}

体

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

現在の唯一の問題は、ページに多くの画像がある場合、すべての画像がダウンロードされたときにのみ onload イベントがトリガーされることです。

画像のダウンロード中であっても、純粋な JavaScript または CSS を使用してフェードインを行うにはどうすればよいですか?

注: 外部の js ファイルまたはフレームワークは使用できません。

4

2 に答える 2

0

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-16T12:12:38.277 に答える
0

純粋なCSSを使用できます

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

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

プレフィックスを追加することを忘れないでください

于 2013-06-16T12:17:04.807 に答える