0

私は、機能するページから始めず、その上に js 機能を構築するという Web 開発の失敗を少ししました。私が再開発しているサイトは、きれいな jquery アニメーションがたくさんある古いサイトです。

すべてのページの読み込みを ajax の有無にかかわらず処理できるようにするために多大な労力を費やしましたが、最初のページの読み込みでは、display:none;またはのプロパティで読み込まれるいくつかの要素が生成opacity:0;され、ドキュメントの準備ができているときに表示されるようにアニメーション化されるため、これはまったく無意味であることに気付きました

これを修正したいのですが、そもそも修正した理由はいくつかあります。

1: jquery プラグインが作動する前にスタイル設定されていないメニューのフラッシュを非表示にします (これを非 js メニューに置き換え、jquery メニューにアニメーション化してこれを解決します)

2: もう 1 つの理由は、ページ読み込み時の最初のアニメーションが好きで、理想的にはそれを維持したいからです。しかし、ロード時にページの大部分をjsユーザーには見えず、非jsユーザーには見えるようにしたいので、これは問題を引き起こしますが、ページがレンダリングされる前に要素のcssプロパティが変更されるようにするにはどうすればよいですか?これは jquery を使用しますが、jquery ライブラリが (キャッシュなしで) 読み込まれるまでに、私のページは既にレンダリングされているため、非表示にしてアニメーション化する前にコンテンツがフラッシュされますか?

4

2 に答える 2

3

このブロックは、JS がオフになっているユーザーにのみ表示されます。

<noscript>html code here</noscript>

次のようなスタイルを追加できます。

<noscript>
    <style>
        #content{
            background: red;
        }
    </style>
</noscript>
于 2012-12-03T18:49:19.270 に答える
0

に以下を追加できます<head>。

<script>document.documentElement.className+='js'</script>

js次に、要素のクラスhtmlf.exを使用して、javascript 対応のブラウザーを別の方法でスタイル設定できます。

html .animate{opacity:1} /* all browsers */
html.js .animate{opacity:0} /* js-enabled browsers */

クラスはすでに に追加されているheadため、残りの DOM でちらつきはありません。

タグを使用することもできますnoscriptが、個人的には、単一のスタイルシートでスタイルを管理できるため、こちらの方がすっきりしていると思います。

于 2012-12-03T18:54:54.707 に答える